Vue 3 avec Sitecore MVC

Introduction

Vue devient rapidement l’un des frameworks JavaScript les plus populaires pour la création d’interfaces utilisateur. Vue 3 peut être utilisé comme interface utilisateur pour un site Web Sitecore MVC (c’est-à-dire pas sans tête), mais quelques pièges de configuration doivent être résolus et une stratégie générale pour travailler avec votre balisage doit être mise en œuvre.

Il existe également des différences significatives entre l’implémentation de Vue 3 dans une application .NET telle que Sitecore, par opposition à Vue 2. Commençons à utiliser Vue 3 avec Sitecore MVC !

Mise en place de Vue 3

Ces étapes supposent que vous travaillez avec une implémentation Sitecore MVC existante. Si vous n’avez pas d’instance de travail, vous pouvez toujours essayer Vue sur l’un des sites de démonstration disponibles dans le Référentiels Sitecore GitHub (vous aurez besoin d’une licence Sitecore valide bien sûr).

La première étape pour utiliser Commençons à utiliser Sitecore MVC avec Vue 3 consiste à installer les packages nécessaires pour Vue, y compris les moyens de compiler, charger et regrouper tous vos composants Vue. Il y a beaucoup d’options ici, mais au minimum vous voudrez Vue (encore une fois, nous nous concentrons sur Vue 3 ici), un paquet pour charger Vue, charger votre SaSS/CSS, et un moyen de compiler et regrouper votre Vue Composants.

L’objectif ici est de mettre en place une combinaison fonctionnelle de Vue 3 dans une application Sitecore .NET, nous allons donc rester simple et n’inclure que l’essentiel. Commençons par ajouter un bundler en exécutant la commande suivante dans un terminal :

Conditions préalables

L’hypothèse principale ici est que vous disposez d’une instance Sitecore existante. Vous avez également très probablement une configuration frontale existante (et donc déjà npm/ yarn et un fichier package.json). Sinon, installez le nœud et exécutez npm init. Alternativement, vous pouvez utiliser du fil en exécutant yarn init.

Installer des packages pour Vue 3

Commencez par installer notre bundler en tant que dépendance de développement. Ici, j’utilise la version la plus récente de Parcel (au moment de la rédaction, la version 2.7.0). Webpack est une autre bonne option, mais demande un peu plus d’efforts dans le département de configuration.

npm install parcel --save-dev

ou

yarn add parcel --dev

Ensuite, nous voulons installer Vue et quelques chargeurs associés pour nous aider à utiliser JavaScript et CSS dans nos composants de fichier unique (SFC).

npm install vue

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

ou

yarn add vue

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

Créez votre composant

Vous pouvez commencer par sélectionner n’importe quel rendu Sitecore et étendre l’interface utilisateur pour utiliser Vue. Pour cet article, nous choisissons un exemple simple de rendu Sitecore pour un titre avec un champ titre et sous-titre.

Mettre à jour le balisage de la vue Razor

Quel que soit le rendu que vous utilisez pour incorporer Vue et étendre l’interface utilisateur, vous voudrez avoir un identifiant (vous pouvez utiliser une classe ou un nom de balise non encore établi). Vous souhaiterez également utiliser des propriétés pour transmettre des données de la vue de rasoir à votre composant de vue.

@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 headline="@Html.Sitecore().Field(Templates.Heading.FieldNames.Heading)"
                  subhadline="@Html.Sitecore().Field(Templates.Heading.FieldNames.Subheadline)"
        </cart-heading>
    }
</div>

Créer un composant de vue SFC simple

Ici, nous créons un SFC Vue appelé header-component.vue. Il contient un modèle qui affichera nos champs Sitecore, du JavaScript de base pour déclarer les propriétés des champs Sitecore et du CSS simple pour styliser le composant.

<template>
    <p class="heading__wrapper">
        <div class="heading__headline">{{ headline }}</div>
        <div class="heading__subheadline">{{ subheadline }}</div>
    </p>
</template>
<script>
    import { ref, watch } from 'vue';
    export default {
        name: 'Heading',
        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__wrapper {
        font-family: sans-serif;
    }
    .heading__headline {
        font-size: 2rem;
        font-weight: 600;
    }
    .heading__subheading {
        font-size: 1.125rem;
    }
</style>

Câblez votre composant Vue 3

Monter

Dans Vue 2, lors du montage d’une application qui a un template, le contenu rendu remplace l’élément sur lequel nous montons. Dans Vue 3, l’application rendue est ajoutée en tant qu’enfant d’un tel élément, remplaçant le innerHTML.

Pour créer une racine et monter votre composant en tant qu’enfant de la racine, vous créez un fichier app.js et ajoutez le code suivant.

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

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

Ajouter un alias

La configuration précédente nous permettrait d’utiliser les composants Vue dans notre application, mais les données de Sitecore (via la vue du rasoir) ne seraient pas transmises via les attributs que nous avons utilisés (titre et sous-titre) sans spécifier d’alias. Nous devons prendre le contrôle de l’importation de Vue et forcer l’utilisation du module ES. Ce n’est pas bien documenté, mais plusieurs articles de blog sur le Web font référence à cette étape requise dans l’utilisation de Vue avec une application .NET MVC.

Webpack a une propriété d’alias, mais Parcel est « sans configuration », il faudra donc mettre à jour le fichier package.json avec notre alias. Fait intéressant, le Documents du MNP ne liste pas alias en tant que propriété officielle du fichier package.json, mais le Documentation officielle du colis recommande de configurer l’alias de cette façon, il devrait donc être sûr.

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

Conclusion

L’ajout de Vue 3 comporte quelques pièges, surtout si vous savez comment travailler avec Vue 2 dans le contexte d’un site Web Sitecore MVC. Si vous rencontrez des problèmes ou rencontrez des problèmes, assurez-vous que vous montez votre composant en tant qu’enfant de l’application racine et que vous avez configuré un alias que votre bundler peut reconnaître.