Using Vue3 in ProcessWire Templates

Home Code Using Vue3 in ProcessWire Templates

I finally made the switch from AngularJS to VUE for professional websites, and so my own website couldn't lag behind. It was surprisingly easy to get VUE3 working on a ProcessWire installation. This page covers the basics - you could wrap all of this code in a module if that's what you prefer. Official documentation often has a developer fiddle with NPM or Git without explaining what happens behind the hood, and I wanted to prevent that.

Include Vue3 and application file in the <head> section

Before we can use Vue3 components in ProcessWire templates, we must first add both Vue3 and our local application file. If you wish to use AJAX calls, it's recommended to download the latest version of Axios and add it to your Scripts folder. You can load VUE3 from the CDN or from the local domain; that's a matter of preference or project requirements. As long as it's loaded in the <head> section of the page.

                            <!-- Vue (dev) -->
<script src="https://unpkg.com/vue@next"></script>
    
<!-- Axios -->
<script src="<?php echo $config->urls->templates?>scripts/axios/axios.js"></script>                        

Add the application script to the body section

Now all we have to do is load the application in the site's body. This can be done using a module, using a hook, or by plainly adding a <script> tag to the body.

                            <script src="<?php echo $config->urls->templates?>scripts/vue3.js"></script>                        

Initialize the application

Once the files are included we can start writing the actual application in the file we added in the previous step. To start, we create the application instance so components can register with it.

                            const app = Vue.createApp({})                        

Register components

After initialization we register every component with the application.

                            app.component('dock', 
{
    name:"Dock",
    data() {
        return {
            open:false
        }
    },
    methods: {
        toggle(){
            this.open = !this.open;
        },
        resize(){
            this.open = false;
        }
    },
    template:
    `
    <div class="dock" :class="{open:open}">
        <div class="dock-viewport" :class="{open:open}">
            <div class="dock-menu" :class="{open:open}">
                <slot name="menu"></slot>
            </div>
        </div>
    </div>
    <div class="navbar">
        <div class="navicon" v-on:click="toggle">
            <slot name="navi"></slot>
        </div>
    </div>
    `,
    mounted:function(){
        window.addEventListener('resize', this.resize);
    }
});                        

Mount the application

Now that we've declared our components, we mount the application.

                            app.mount('#vue-app');                        

Tech Stack

PHP

HTML

Javascript

C#

CSS