To begin, generate your front-end project with Vue-cli and run the generator:
$ vue create .
Select theses recommanded options:
Babel,
Vuex (optional),
CSS Pre-processor (Sass),
Linter (ESlint),
Unit test (Jest)
Then install @node-sitecore/cli-plugin-vue with npm or yarn:
$ npm install @node-sitecore/cli-plugin-vue
Cli
This package add a new command:
Usage: nsc vue <build|check> [options]
Options:
-V, --version output the version number
--configPath <path> Path to .nscrc file
--currentWebsite <code> Default current website to compile source
-p, --pattern <cmd> Glob pattern to list project
-l, --list <cmd> Website code list (EU,FR,etc)
-e, --exclude <cmd> Exclude Website code list (Common,etc)
-h, --help output usage information
Example:
nsc vue build // build only the default currentWebsite
nsc vue build --list EU,FR
nsc vue build --pattern "scr/Project/*" --exclude Hotfix,Common
nsc check // Check if entries exists for a given currentWebsite
Build command is a shortcut to compile multiple Sitecore Projects. It's an equivalent of:
vue-cli-service build --currentWebsite EU --production
vue-cli-service build --currentWebsite FR --production
Configuration
Now, edit the vue.config.js and copy this configuration:
const config = require('@node-sitecore/config');
const vueConfig = {
baseUrl: '',
// whether to use eslint-loader for lint on save.
// valid values: true | false | 'error'
// when set to 'error', lint errors will cause compilation to fail.
lintOnSave: false,
// Use the full build with in-browser compiler
runtimeCompiler: true,
// tweak internal webpack configuration.
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
configureWebpack: {},
// Remove sourcemap in production
productionSourceMap: true,
// Disable hashing, is performed by Sitecore
filenameHashing: false,
// CSS related options
css: {
// pass custom options to pre-processor loaders. e.g. to pass options to
// sass-loader, use { sass: { ... } }
loaderOptions: {}
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// split vendors using autoDLLPlugin?
// can also be an explicit Array of dependencies to include in the DLL chunk.
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
// dll: false,
// options for the PWA plugin.
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {
exclude: [
/\.map$/,
/img\/icons\//,
/manifest\.json$/
],
workboxOptions: {
swDest: `../../service-worker.${config.currentWebsite}.js`,
runtimeCaching: []
}
},
chainWebpack(webpackConfig) {
// Configuration to extract img/svg from the bundle
// webpackConfig.module
// .rule('images')
// .use('url-loader')
// .loader('url-loader')
// .tap(options => Object.assign(options, { limit: 1 }));
// Add support to import SVG as a vue module
// const svgRule = webpackConfig.module.rule('svg');
// svgRule.uses.clear();
// svgRule
// .use('vue-svg-loader')
// .loader('vue-svg-loader');
}
};
module.exports = config.buildVueConfig(vueConfig);
scssMixinsPath: Add the scss file which include all of your mixins/variables should be shared with Vue Component.
outputDir: Output directory where the source will be compiled.
baseUrl: Set the base url for the different profile.
entries: Configure the bundle compilation strategies (See Define entries section).
alias: Set alias list for webpack (See Define alias section).
Getters
Configuration fields
Key
Default value
Tags
Description
vueCli
{...}
Vue-cli, Vue
Return the configuration dedicated to Vue-cli.
entries
[...]
Vue-cli, Vue
Entries list which will be compilied by webpack
Define entries
VueCli configuration accept multiple entries files. Webpack will create different bundles according to your configuration. Also, each entry can be configured by environment profile (production or development).
Here three possible scenario (production, development and all profile):
Alias can be used in you Vue and Javascript file like that:
import {something} from "@Foundation";
import CarouselModule from "@Feature/Carousel";
// ...
PWA
Vue-cli provide an extension to manage Progressive web application with webpack. To generate multiple serviceWorker per project/site, you have to configure PWA options in your vue.config.js and edit the registerServiveWorker.js generated by Vue-cli.
/* eslint-disable no-console */
import { register } from 'register-service-worker';
if (process.env.NODE_ENV === 'production') {
const currentWebsite = process.env.VUE_APP_CURRENT_WEBSITE || 'Common';
register(`/service-worker.${currentWebsite}.js`, {
ready() {
console.log('App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB');
},
cached() {
console.log('Content has been cached for offline use.');
},
updated() {
console.log('New content is available; please refresh.');
},
offline() {
console.log('No internet connection found. App is running in offline mode.');
},
error(error) {
console.error('Error during service worker registration:', error);
}
});
}
And finally, edit your nuspec file and add this entry:
Sitecore allow to have multiple site workspace like EU, GR, etc... the npm run develop compile only one localization to preview your code in Fractal for a given project. To change the default currentWebsite without change the .nscrc default configuration, create a new file .dev.nscrc and copy this code:
{
"currentWebsite": "EU"
}
Change the code according to the project code you want to preview in fractal then run npm run develop.
