Working With Vue

Creating vue module

• Note: This project uses Vue3
• Create vue module within the ‘/src/js/vue-modules’ folder e.g. ‘/src/js/vue-modules/my-vue-module/MyVueModule.vue’
• Add some some basic scaffolding to the vue file:

<template>
  <div class="container my-9">
    <!--  -->
    
    <!--  -->
  </div>
</template>

<script setup>
import { ref } from 'vue'

const helloWorld = ref('Hello world!')
</script>

Bootstrapping

Create a js file in the app folder named after your vue module (src/js/app):

/src/js/my-vue-module.js

Add the following code to the JS file to import your new vue module:

    import MyVueModule from './vue-modules/my-vue-module/MyVueModule.vue'

    new VueModuleLoader([
        {
            name: 'MyVueModule',
            instance: MyVueModule
        }
    ])

Go to the vite.config.base.js (located in root of Website.FrontEnd folder) file and add your new js file to the rollupOptions.input array:

 entryPoints: [
    rollupOptions: {
        input: {
          myVueModule: resolve(process.cwd(), 'src/js/my-vue-module.js'),
        },
        ...
    }

Use the entryTags filter to render the script tag within the head of the HTML document:

{{ '/src/js/my-vue-module.js' | entryTags  }}

In dev, this will output the following script tag:

<script type="module" src="/front-end/src/js/my-vue-module.js"></script>

In production, it will output the compiled, hashed script tag:

<script type="module" src="/front-end/assets/myVueModule-CtVCuI-x.js"></script>

Add a div with the data-vue-module attribute with the value matching your module name

<div data-vue-module="MyVueModule"></div>

General Guidelines:

You can pass props down from the the div the vue instance is mounted to via data attributes:

<div data-vue-module="MyVueModule" data-title="A title!"></div>

(For example we often use the data attributes to pass down an API URL that can be called within the vue module)

This can then be accessed via props in your vue:

const props = defineProps({
  title: {
    type: String,
    required: false,
    default: ''
  }
})

You can optionally pass a router into the vue module:

import MyVueModuleRouter from './vue-modules/my-vue-module/router/index.js'
import MyVueModule from './vue-modules/my-vue-module/MyVueModule.vue'

new VueModuleLoader([
    {
        name: 'MyVueModule',
        instance: MyVueModule,
        router: MyVueModuleRouter,
    }
])

Example of router file:

import { createRouter, createWebHistory } from 'vue-router'

const routes = []

const router = createRouter({ history: createWebHistory(), routes })

export default router

You can also indicate if there are single / multiple vue components using the isSingleModule property e.g.

{
    name: 'MyVueModule',
    instance: MyVueModule,
    router: MyVueModuleRouter,
    isSingleModule: true
}

For example there may only ever be one instance of this vue module on a page, if so, set it to be a single module.