add Cerebral example

Author: hipertracker

quasar.conf.js

@@ -13,7 +13,7 @@ module.exports = function (/* ctx */) {
     // --> boot files are part of "main.js"
     // https://quasar.dev/quasar-cli/cli-documentation/boot-files
     boot: [
-      
+      'cerebral'
     ],
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
@@ -64,7 +64,8 @@ module.exports = function (/* ctx */) {
 
     // Full list of options: https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
     build: {
-      vueRouterMode: 'hash', // available values: 'hash', 'history'
+      vueRouterMode: 'history', // available values: 'hash', 'history'
+      vueCompiler: true, // <- important to integrate Cerebral
 
       // rtl: false, // https://quasar.dev/options/rtl-support
       // showProgress: false,
@@ -93,7 +94,7 @@ cfg.module.rules.push({
     devServer: {
       https: false,
       port: 8080,
-      open: true // opens browser window automatically
+      open: false // opens browser window automatically
     },
 
     // animations: 'all', // --- includes all animations

src/boot/cerebral.js

@@ -0,0 +1,21 @@
+import {Container} from "@cerebral/vue";
+import Cerebral from "cerebral";
+import App from '../App.vue'
+
+const Controller = Cerebral({
+  state: {
+    message: 'Welcome to Cerebral!',
+  },
+});
+
+export default async (context) => {
+  let render = h =>
+    h({
+      components: {
+        HOC: Container(Controller),
+        App,
+      },
+      template: '<HOC><App/></HOC>',
+    })
+  context.app.render = render
+}

src/pages/Index.vue

@@ -3,12 +3,16 @@
     <img
       alt="Quasar logo"
       src="~assets/quasar-logo-full.svg"
-    >
+    />
+    <h1 class="bg-yellow-4">{{welcome}}</h1>
   </q-page>
 </template>
 
 <script>
-export default {
-  name: 'PageIndex'
-}
+  import {connect} from '@cerebral/vue'
+  import {state} from 'cerebral'
+
+  export default connect({welcome: state`message`}, {
+    name: 'PageIndex',
+  })
 </script>