Using Vue3 in ProcessWire Templates

HomeCodeUsing 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. This is just one way to do it, and assumes you're using the default template system.

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. Vue3 and Axios are also available through NPM. You can load Vue3 from the CDN or from the local domain; that's a matter of preference or project requirements. As long as they are both loaded in the <head> section of the page we should be good.

                <!-- 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. The example assumes you've made a .js file in the default templates/scripts folder of a ProcessWire project.

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

Initialize the application

Once the files are in place, 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

Tracking cookies by Google.