VueJS in the setup

Novicell-frontend package supports VueJS out of the box. This is an example of my simple Vue component:

• npm install vue
• I created new folder in src/Modules called components (src/Modules/components), where I will place my .Vue (component) files.
• I created a file called Test.vue inside src/Modules/components.
• In src/Modules folder I created myVueApp.js file that will the main wrapper of vue components
• Lastly, imported myVueApp.bundle.js in fractal component's handlebars file. Also written some templating

component.hbs

<h3 class="title">{{ greeting }}</h3>
<div class="{{ class }}">{{ introduction }}</div>

<div id="app">
    <p>${text} <h1>${count}</h1></p>
    <!-- this will no longer update `foo`! -->
    <Test
    :child_count="count"
    ></Test>
    <button v-on:click="count++">Change it</button>
</div>
<script src="{{ path '/dist/scripts/myVueApp.bundle.js' }}"></script>

(note that I close ${ } delimiters in Vue options)

myVueApp.js:

import Vue from 'vue';
import Test from './components/Test.vue';

const vm = new Vue({
  data: {
    count: 1,
    text: 'hello',
  },
  components: {
    Test,
  },
  delimiters: ['${', '}'],
  el: '#app',
});

Test.vue:

<template>
  <div>HeyHo, {{text}} and <h5>Multiplied count: {{multiplied}}</h5></div>
</template>
 <script>
export default {
  props: {
    child_count: {
      type: Number,
      required: false
    }
  },
  data() {
    return {
      count: 1,
      text: "It's the child component!"
    };
  },
  computed: {
    multiplied: function() {
      return this.child_count * 2;
    }
  }
};
</script>