feat: add vuetify template

cmd/templates/vuetify-basic/frontend/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

cmd/templates/vuetify-basic/frontend/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

cmd/templates/vuetify-basic/frontend/package.json.template

@@ -0,0 +1,52 @@
+{
+  "name": "{{.NPMProjectName}}",
+  "author": "{{.Author.Name}}<{{.Author.Email}}>",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "babel-polyfill": "^6.26.0",
+    "core-js": "^2.6.4",
+    "material-design-icons-iconfont": "^5.0.1",
+    "vue": "^2.5.22",
+    "vuetify": "^1.5.14"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.4.0",
+    "@vue/cli-plugin-eslint": "^3.4.0",
+    "@vue/cli-service": "^3.4.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "eventsource-polyfill": "^0.9.6",
+    "vue-template-compiler": "^2.5.21",
+    "webpack-hot-middleware": "^2.24.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

cmd/templates/vuetify-basic/frontend/src/App.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-app id="inspire" dark>
+    <v-navigation-drawer v-model="drawer" clipped fixed app>
+      <v-list dense>
+        <v-list-tile>
+          <v-list-tile-action>
+            <v-icon>dashboard</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <v-list-tile-title>Dashboard</v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+        <v-list-tile>
+          <v-list-tile-action>
+            <v-icon>settings</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <v-list-tile-title>Settings</v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+      </v-list>
+    </v-navigation-drawer>
+    <v-toolbar app fixed clipped-left>
+      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
+      <v-toolbar-title>Application</v-toolbar-title>
+    </v-toolbar>
+    <v-content>
+      <v-container fluid class="px-0">
+        <v-layout justify-center align-center class="px-0">
+          <hello-world></hello-world>
+        </v-layout>
+      </v-container>
+    </v-content>
+    <v-footer app fixed>
+      <span style="margin-left:1em">&copy; You</span>
+    </v-footer>
+  </v-app>
+</template>
+
+<script>
+import HelloWorld from "./components/HelloWorld.vue";
+
+export default {
+  data: () => ({
+    drawer: false
+  }),
+  components: {
+    HelloWorld
+  },
+  props: {
+    source: String
+  }
+};
+</script>
+
+<style>
+.logo {
+  width: 16em;
+}
+</style>

cmd/templates/vuetify-basic/frontend/src/components/HelloWorld.vue

@@ -0,0 +1,83 @@
+<template>
+  <v-container fluid class="px-0">
+    <v-layout>
+      <v-flex xs12 sm6 offset-sm3>
+        <v-card raised="raised" class="pa-4 ma-4">
+          <v-layout justify-center align-center class="pa-4 ma-4">
+            <v-img :src="require('../assets/images/logo.png')"></v-img>
+          </v-layout>
+          <v-card-actions>
+            <v-layout justify-center align-center class="px-0">
+              <v-btn color="blue" dark @click="getMessage">Press Me</v-btn>
+            </v-layout>
+          </v-card-actions>
+        </v-card>
+      </v-flex>
+    </v-layout>
+    <div class="text-xs-center">
+      <v-dialog v-model="dialog" width="500">
+        <v-card>
+          <v-card-title class="headline" primary-title>Message from Go</v-card-title>
+          <v-card-text>{{message}}</v-card-text>
+          <v-divider></v-divider>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="primary" flat @click="dialog = false">Awesome</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </div>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      message: " ",
+      raised: true,
+      dialog: false
+    };
+  },
+  methods: {
+    getMessage: function() {
+      var self = this;
+      window.backend.basic().then(result => {
+        self.message = result;
+        self.dialog = true;
+      });
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1 {
+  margin-top: 2em;
+  position: relative;
+  min-height: 5rem;
+  width: 100%;
+}
+a:hover {
+  font-size: 1.7em;
+  border-color: blue;
+  background-color: blue;
+  color: white;
+  border: 3px solid white;
+  border-radius: 10px;
+  padding: 9px;
+  cursor: pointer;
+  transition: 500ms;
+}
+a {
+  font-size: 1.7em;
+  border-color: white;
+  background-color: #121212;
+  color: white;
+  border: 3px solid white;
+  border-radius: 10px;
+  padding: 9px;
+  cursor: pointer;
+}
+</style>

cmd/templates/vuetify-basic/frontend/src/main.js

@@ -0,0 +1,20 @@
+import Vue from "vue";
+
+// Setup Vuetify
+import Vuetify from 'vuetify';
+Vue.use(Vuetify);
+import 'vuetify/dist/vuetify.min.css'
+import 'material-design-icons-iconfont'
+
+import App from "./App.vue";
+
+Vue.config.productionTip = false;
+Vue.config.devtools = true;
+
+import Bridge from "./wailsbridge";
+
+Bridge.Start(() => {
+  new Vue({
+    render: h => h(App)
+  }).$mount("#app");
+});

cmd/templates/vuetify-basic/frontend/vue.config.js

@@ -0,0 +1,43 @@
+let cssConfig = {};
+
+if (process.env.NODE_ENV == "production") {
+  cssConfig = {
+    extract: {
+      filename: "[name].css",
+      chunkFilename: "[name].css"
+    }
+  };
+}
+
+module.exports = {
+  chainWebpack: config => {
+    let limit = 9999999999999999;
+    config.module
+      .rule("images")
+      .test(/\.(png|gif|jpg)(\?.*)?$/i)
+      .use("url-loader")
+      .loader("url-loader")
+      .tap(options => Object.assign(options, { limit: limit }));
+    config.module
+      .rule("fonts")
+      .test(/\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/i)
+      .use("url-loader")
+      .loader("url-loader")
+      .options({
+        limit: limit
+      });
+  },
+  css: cssConfig,
+  configureWebpack: {
+    output: {
+      filename: "[name].js"
+    },
+    optimization: {
+      splitChunks: false
+    }
+  },
+  devServer: {
+    disableHostCheck: true,
+    host: "localhost"
+  }
+};

cmd/templates/vuetify-basic/go.mod.template

@@ -0,0 +1 @@
+module {{.BinaryName}}

cmd/templates/vuetify-basic/main.go.template

@@ -0,0 +1,27 @@
+package main
+
+import (
+  "github.com/leaanthony/mewn"
+  "github.com/wailsapp/wails"
+)
+
+func basic() string {
+  return "Hello World!"
+}
+
+func main() {
+
+  js := mewn.String("./frontend/dist/app.js")
+  css := mewn.String("./frontend/dist/app.css")
+
+  app := wails.CreateApp(&wails.AppConfig{
+    Width:  1024,
+    Height: 768,
+    Title:  "{{.Name}}",
+    JS:     js,
+    CSS:    css,
+    Colour: "#131313",
+  })
+  app.Bind(basic)
+  app.Run()
+}

cmd/templates/vuetify-basic/template.json

@@ -0,0 +1,14 @@
+{
+  "name": "Vuetify Basic",
+  "version": "1.0.0",
+  "shortdescription": "Vuetify + Webpack",
+  "description": "Basic template using Vuetify and bundled using Webpack",
+  "install": "npm install",
+  "build": "npm run build",
+  "author": "lea <lea.anthony@gmail.com>",
+  "created": "2019-05-25 09:39:40.009307 +1000 AEST m=+59.539991073",
+  "frontenddir": "frontend",
+  "serve": "npm run serve",
+  "bridge": "src",
+  "wailsdir": ""
+}