- Inserted Prerendering plugin('prerender-spa-plugin') to create HTML pages (for Google... crawler)

- Added Meta Tags (title, description and keywords)

quasar.conf.js

@@ -5,6 +5,8 @@ const helpers = require('./helpers');
 const webpack = require('webpack')
 const envparser = require('./config/envparser')
 
+const PrerenderSPAPlugin = require('prerender-spa-plugin')
+const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
 
 const extendTypescriptToWebpack = (config) => {
   config.resolve
@@ -53,6 +55,30 @@ const extendHTMLToWebpack = (config) => {
     .loader('vue-html-loader')
 };
 
+const extendPrerender = (config) => {
+  config
+    .plugin('prerender-spa-plugin')
+    .use(PrerenderSPAPlugin, [{
+      // Required - The path to the webpack-outputted app to prerender.
+      staticDir: path.join(__dirname, 'dist/spa'),
+      // Required - Routes to render.
+      routes: ['/'],
+
+      renderer: new Renderer({
+        injectProperty: '__PRERENDER_INJECTED',
+        inject: {
+          foo: 'bar'
+        },
+        // renderAfterDocumentEvent: 'custom-post-render-event',
+        renderAfterTime: 5000,
+        // maxConcurrentRoutes: 4,
+        // renderAfterElementExists: '#content',
+        headless: true,
+      })
+    }])
+
+};
+
 module.exports = function (ctx) {
   return {
     htmlVariables: {
@@ -109,6 +135,8 @@ module.exports = function (ctx) {
           .rule('template-engine')
           .test(/\.(gql|graphql)$/)
           .loader('graphql-tag/loader') */
+
+        // extendPrerender(config);
       }
     },
     dev: {

src/components/CEventsCalendar/CEventsCalendar.ts

@@ -293,7 +293,6 @@ export default class CEventsCalendar extends MixinEvents {
     return (CalendarStore.state.intervalRange.max - CalendarStore.state.intervalRange.min) * (1 / CalendarStore.state.intervalRangeStep)
   }
 
-
   get containerStyle() {
     const styles = { height: '' }
     if (this.calendarView !== 'month' || (this.calendarView === 'month' && CalendarStore.state.dayHeight === 0)) {

src/mixins/mixin-metatags.ts

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+import { IMetaTags } from '@src/model'
+import { tools } from '@src/store/Modules/tools'
+
+// You can declare a mixin as the same style as components.
+@Component
+export default class MixinMetaTags extends Vue {
+  public mymeta: IMetaTags = {title: '', description: '', keywords: ''}
+
+  public setmeta(mymeta: IMetaTags) {
+    this.mymeta = mymeta
+  }
+}