add plugins

Author: ricardovanlaarhoven

generator/index.js

@@ -8,7 +8,8 @@ module.exports = (api, options) => {
             'vuex': '^3.1.0',
             'vuex-persistedstate': '^2.5.4',
             '@fortawesome/fontawesome-pro': '^5.8.1',
-            "lodash.clonedeep": "^4.5.0",
+            'lodash.clonedeep': '^4.5.0',
+            'css-vars-ponyfill': '^2.1.2',
         },
     });
     if (options.useCrud) {
@@ -17,32 +18,45 @@ module.exports = (api, options) => {
                 '@kingscode/vuetify-resource': '^1.1.0',
             },
         });
-        api.render('./templates/Crud', {
-            ...options,
-        });
+        api.render('./templates/Crud', options);
     }
 
-    api.render('./templates/Default', {
-        ...options,
-    });
+    api.render('./templates/Default', options);
 
     if (options.useAuthorisation) {
-        api.render('./templates/Authorisation', {
-            ...options,
+        api.render('./templates/Authorisation', options);
+    }
+
+    if (options.plugins.includes('sentry')) {
+        api.extendPackage({
+            dependencies: {
+                '@sentry/browser': '^5.8.0',
+                '@sentry/integrations': '^5.8.0',
+            },
+        });
+        api.render('./templates/Plugins/sentry', options);
+    }
+
+    if (options.plugins.includes('analytics')) {
+        api.extendPackage({
+            dependencies: {
+                'vue-analytics': '^5.17.4',
+            },
         });
+        api.render('./templates/Plugins/analytics', options);
     }
 
     api.onCreateComplete(() => {
-        if(fs.existsSync('src/store.js')) {
+        if (fs.existsSync('src/store.js')) {
             fs.unlinkSync(api.resolve('src/store.js'));
         }
-        if(fs.existsSync('src/assets/logo.svg')) {
+        if (fs.existsSync('src/assets/logo.svg')) {
             fs.unlinkSync(api.resolve('src/assets/logo.svg'));
         }
-        if(fs.existsSync('src/components/HelloWorld.vue')) {
+        if (fs.existsSync('src/components/HelloWorld.vue')) {
             fs.unlinkSync(api.resolve('src/components/HelloWorld.vue'));
         }
-        if(fs.existsSync('src/main.js')) {
+        if (fs.existsSync('src/main.js')) {
             fs.unlinkSync(api.resolve('src/main.js'));
         }
         fs.renameSync(api.resolve('src/newmain.js'), api.resolve('src/main.js'));

generator/templates/Default/_env.development.local

@@ -5,3 +5,9 @@ VUE_APP_PUBLIC_PATH=
 VUE_APP_OAUTH_CLIENT_ID=<%= options.oauthClientId %>
 VUE_APP_OAUTH_CLIENT_SECRET=<%= options.oauthSecret %>
 <%_ } _%>
+<%_ if (options.plugins.includes('analytics')) { _%>
+VUE_APP_ANALYTICS=
+<%_ } _%>
+<%_ if (options.plugins.includes('sentry')) { _%>
+VUE_APP_SENTRY=
+<%_ } _%>

generator/templates/Default/_env.example

@@ -5,3 +5,9 @@ VUE_APP_PUBLIC_PATH=
 VUE_APP_OAUTH_CLIENT_SECRET=
 VUE_APP_OAUTH_CLIENT_ID=
 <%_ } _%>
+<%_ if (options.plugins.includes('analytics')) { _%>
+VUE_APP_ANALYTICS=
+<%_ } _%>
+<%_ if (options.plugins.includes('sentry')) { _%>
+VUE_APP_SENTRY=
+<%_ } _%>

generator/templates/Default/src/newmain.js

@@ -1,7 +1,7 @@
 import '@babel/polyfill'
 import Vue from 'vue'
 import API from './API.js';
-import vuetify from './plugins/vuetify';
+import {vuetify} from './plugins';
 <%_ if (options.useCrud) { _%>
 import VuetifyResource from '@kingscode/vuetify-resource';
 <%_ } _%>

generator/templates/Default/src/plugins/index.js

@@ -0,0 +1,12 @@
+import cssVars from 'css-vars-ponyfill';
+<%_ if (options.plugins.includes('analytics')) { _%>
+import './analytics';
+<%_ } _%>
+<%_ if (options.plugins.includes('sentry')) { _%>
+import './sentry';
+<%_ } _%>
+import vuetify from './vuetify';
+
+cssVars();
+
+export {vuetify};

generator/templates/Plugins/analytics/src/plugins/analytics.js

@@ -0,0 +1,10 @@
+import VueAnalytics from 'vue-analytics';
+import Vue from 'vue';
+import router from './../router';
+
+if (process.env.VUE_APP_ANALYTICS) {
+    Vue.use(VueAnalytics, {
+        id: process.env.VUE_APP_SENTRYVUE_APP_SENTRY,
+        router,
+    });
+}

generator/templates/Plugins/sentry/src/plugins/sentry.js

@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+import * as Integrations from '@sentry/integrations';
+import Vue from 'vue';
+
+if (process.env.VUE_APP_SENTRY) {
+    Sentry.init({
+        dsn: process.env.VUE_APP_SENTRY,
+        integrations: [new Integrations.Vue({Vue, attachProps: true})],
+    });
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-plugin-kingscode-scaffold",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "",
   "main": "index.js",
   "scripts": {

prompts.js

@@ -1,5 +1,5 @@
-function useAuthorisation (answers) {
-    return answers.useAuthorisation
+function useAuthorisation(answers) {
+    return answers.useAuthorisation;
 }
 
 module.exports = [
@@ -15,22 +15,45 @@ module.exports = [
         message: 'Do you want to use authorisation (Login/register/invitation/password forgotten)',
         default: true,
     },
+    {
+        name: 'useGithubDeployemnts',
+        type: 'confirm',
+        message: 'Do you want to use github actions for deployments?',
+        default: true,
+    },
+    {
+        name: 'plugins',
+        type: 'checkbox',
+        message: 'Which plugins should we install for you?',
+        choices: [
+            {
+                value: 'sentry',
+                name: 'error logging with sentry',
+                checked: true,
+            },
+            {
+                value: 'analytics',
+                name: 'Google Analytics with vue-analytics',
+                checked: true,
+            },
+        ],
+    },
     {
         name: 'oauthClientId',
         type: 'input',
         message: 'What is the oauth client id? (run php artisan passport:client --password (you can change this later)',
-        when: useAuthorisation
+        when: useAuthorisation,
     },
     {
         name: 'oauthSecret',
         type: 'input',
         message: 'What is the oauth client secret? (run php artisan passport:client --password (you can change this later)',
-        when: useAuthorisation
+        when: useAuthorisation,
     },
     {
         name: 'rootUrl',
         type: 'input',
         message: 'What is the root API url? (you can change this later)',
         default: '//example.local/api',
-    }
+    },
 ];