Sitecore

Vue 3 with Sitecore MVC

tiethnic colleagues sitting at desk looking at laptop computer in office. stock photo

Intro

Vue is rapidly becoming one of the most popular JavaScript frameworks for building user interfaces. Vue 3 can be used as the UI for a Sitecore MVC website (i.e., not headless). Still, a few configuration gotchas need to be addressed, and a general strategy for working with your markup needs to be implemented.

There are also some significant differences in implementing Vue 3 in a .NET application like Sitecore, as opposed to Vue 2. Let’s get started using Vue 3 with Sitecore MVC!

Getting Vue 3 Set Up

These steps assume you’re working with an existing Sitecore MVC implementation. If you don’t have a working instance, you can always try Vue out on one of the demo sites available in the Sitecore GitHub repositories (you will need a valid Sitecore license, of course).

The first step to using Let’s get started using Sitecore MVC with Vue 3 is installing the necessary packages for Vue, including the means to compile, load, and bundle all of your Vue components. There are a lot of options here, but at a minimum, you will want Vue (again, we’re focusing on Vue 3 here), a package to load Vue, load your SaSS/ CSS, and some way to compile and bundle your Vue components.

The goal here is to set up a working combination of Vue 3 within a Sitecore .NET application, so we’re going to keep it simple and only include the essentials. First, let’s add a bundler by running the following command in a terminal:

Prerequisites

The main assumption here is that you have an existing Sitecore instance. You also most likely have an existing front-end setup (and therefore already have npm/ yarn and a package.json file). If not, install the node and run  npm init. Alternatively, you can use yarn by running  yarn init.

Install packages for Vue 3

Get started by installing our bundler as a dev dependency. Here I am using the most recent release of Parcel (at the time of writing, version 2.7.0). Webpack is another good option but takes a bit more effort in the configuration department.

npm install parcel --save-dev

or

Sitecore - Understanding Development Approaches: A Sitecore Outlook
Understanding Development Approaches: A Sitecore Outlook

Designing, building, and implementing top-notch experiences not only requires a great deal of planning, strategy, and time – it also requires the right digital experience platform (DXP) and the right development approach for your business needs.

Get the Guide

yarn add parcel --dev

Next, we want to install Vue and a few associated loaders to help us make use of JavaScript and CSS in our single file components (SFCs).

npm install vue

npm install vue-loader vue-template-compiler vue-style-loader css-loader --save-dev

or

yarn add vue

yarn add vue-loader vue-template-compiler vue-style-loader css-loader --dev

Create your component

You can begin by selecting any Sitecore rendering and extending the UI to use Vue. For this post, we’re choosing a simple example of a Sitecore rendering for a Heading with a headline and subheadline field.

Update Razor view markup

Whatever rendering you’re using to incorporate Vue and extend the UI, you will want to have an identifier (you can use a class or a tag name not already established). You will also want to use properties to pass data from the razor view to your view component.

@using Sitecore.Mvc

@model HeadingRenderingModel

<div @Html.Sxa().Component("heading-component", Model.Attributes)>    
    @if (!String.IsNullOrWhiteSpace(Model.ErrorMessage))
    {
        <div class="error-message">            
            @Model.ErrorMessage
        </div>    
    }
    else
    {
        <!-- Vue template -->        
        <heading-component headline="@Html.Sitecore().Field(Templates.Heading.FieldNames.Heading)"
                  subhadline="@Html.Sitecore().Field(Templates.Heading.FieldNames.Subheadline)"
        </heading-component>
    }
</div>

Create a simple SFC Vue component

Here we’re creating a Vue SFC called heading-component.vue. It contains a template that will display our Sitecore fields, some basic JavaScript to declare the properties for the Sitecore fields, and some simple CSS to style the component.

<template>
    <p class="heading-component__wrapper">
        <div class="heading-component__headline">{{ headline }}</div>
        <div class="heading-component__subheadline">{{ subheadline }}</div>
    </p>
</template>
<script>
    import { ref, watch } from 'vue';
    export default {
        name: 'HeadingComponent',
        props: {
            headline: {
                type: String,
                dault: '',
                required: true
            },
            subheadline: {
                type: String,
                default: '',
                required: false
            }
        },
        setup(props) {
            // TODO: do some stuff if you want
        }
    }
</script>
<style>
    .heading-component__wrapper {
        font-family: sans-serif;
    }
    .heading-component__headline {
        font-size: 2rem;
        font-weight: 600;
    }
    .heading-component__subheading {
        font-size: 1.125rem;
    }
</style>

Wire up your Vue 3 component

Mount up

In Vue 2, when mounting an application with a templatethe rendered content replaces the element we mount to. In Vue 3, the rendered application is appended as a child of such an element, replacing the innerHTML.

To create a root and mount your component as a child to the root, you create an app.js file and add the following code.

import { createApp } from 'vue';
import Heading from './Components/scripts/heading-component.vue';

// Creates root Vue app and adds Heading Component
createApp({
    components: {
        HeadingComponent
    }
}).mount('.heading-component');

Add an alias

The preceding setup would allow us to use Vue components in our application. Still, the data from Sitecore (via the razor view) would not be passed via the attributes we used (headline and subheadline) without specifying an alias. We need to take control of the import of Vue and force the use of the ES module. This is not well documented, but several blog posts on the web reference this required step in using Vue with a .NET MVC application.

Webpack has an alias property, but Parcel is “configuration-less,” so it will require updating the package.json file with our alias. Interestingly, the NPM docs don’t list alias as an official property of the package.json file, but the Parcel official documentation does recommend configuring the alias this way, so it should be safe.

"alias": {
    "vue": "vue/dist/vue.runtime.esm-bundler.js"
}

Conclusion

Adding Vue 3 has some gotchas, especially if you’re familiar with how to work with Vue 2 in the context of a Sitecore MVC website. If you’re having trouble or running into issues, make sure you are mounting your component as a child of the root app and that you have an alias configured that your bundler can recognize.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Steven Craft

Steven is a Solutions Architect with Perficient. He works primarily with Sitecore and .NET but enjoys front-end development using modern JavaScript frameworks like Vue and Next.js and cloud platforms like Azure. When he’s not working with today’s latest technologies, Steven enjoys BJJ, riding his motorcycle, and spending time with his 4 exceptional children.

More from this Author

Follow Us
TwitterLinkedinFacebookYoutubeInstagram