npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@node-sitecore/cli-plugin-vue

v3.12.1

Published

Plugin for NodeSiteCore CLI. Add support of Vue-cli.

Downloads

62

Readme

NodeSitecore/cli-plugin-vue

Add support configuration for Vue-cli stack.

Installation

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);

If you use Jest, edit jest.config.js also:

const config = require('@node-sitecore/config');

module.exports = {
  testPathIgnorePatterns: [
    '<rootDir>/build/',
    '<rootDir>/node_modules/',
    '<rootDir>/packages'
  ],
  collectCoverageFrom: [
    'src/Foundation/Core/**/*.{js,vue}',
    'src/Feature/**/*.{js,vue}',
    'src/Project/**/*.{js,vue}',
    '!build',
    '!src/**/registerServiceWorker.js',
    '!src/**/entry.js',
    '!src/**/common.js',
    '!src/**/entry.development.js',
    '!src/**/entry.production.js',
    '!src/**/index.js',
    '!src/**/polyfills.js',
    '!<rootDir>/node_modules/',
    '!src/Project/Hotfixes/**',
  ],

  setupFiles: [],

  reporters: ['default', 'jest-junit'],
  coverageThreshold: {
    global: {
      branches: 0,
      functions: 0,
      lines: 0,
      statements: 0
    }
  },

  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '\\.(svg)$': '<rootDir>/tasks/jest/transform.svg.js',
    '^.+\\.jsx?$': 'babel-jest'
  },
  moduleNameMapper: {
    '^vue$': 'vue/dist/vue.common.js',
    ...config.getJestModulesMapper()     // Important: Map webpack alias automatically
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/src/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/'
};

Finally, edit your .nscrc file and add Vue-cli configuration:

{
  "vueCli": {
     "outputDir": "<themesDir>/<currentWebsite>",
     "scssMixinsPath": "<foundationDir>/Core/code/Styles/mixins/index.scss",
     "baseUrl": {
       "production": "/themes/<currentWebsite>/",
       "development": "/"
     },
     "entries": [
       {
         "mode": "production",
         "name": "bundle",
         "paths": [
           "<projectDir>/<currentWebsite>/code/Scripts/polyfills.js",
           "<projectDir>/<currentWebsite>/code/Scripts/entry.production.js"
         ]
       },
       {
         "mode": "development",
         "name": "bundle",
         "paths": [
           "<projectDir>/<currentWebsite>/code/Scripts/polyfills.js",
           "<projectDir>/<currentWebsite>/code/Scripts/entry.development.js"
         ]
       }
     ],
     "alias": {
       "@Foundation": "<foundationScriptsDir>",
       "@Feature": "<featureDir>",
       "@Project": "<projectDir>",
       "@Themes": "<foundationDir>/Core/code/Styles/"
     }
  }
}

A project example is available on this repository https://github.com/NodeSitecore/sitecore-vue-boilerplate.

Options

  • 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):

{
  "vueCli": {
    "entries": [
      {
        "mode": "production",
        "name": "bundle",
        "paths": [
          "<projectDir>/<currentWebsite>/code/Scripts/polyfills.js",
          "<projectDir>/<currentWebsite>/code/Scripts/entry.production.js"
        ]
      },
      {
        "mode": "development",
        "name": "bundle",
        "paths": [
          "<projectDir>/<currentWebsite>/code/Scripts/polyfills.js",
          "<projectDir>/<currentWebsite>/code/Scripts/entry.development.js"
        ]
      },
      {
        "name": "admin",
        "extractVendors": false,
        "paths": [
          "<projectDir>/<currentWebsite>/code/Scripts/admin.entry.js"
        ]
      }
   ]
  }
}

This example generate two bundles bundle.js and admin.js but bundle.js.

Entry options:

  • mode: NODE_ENV profile. Indicates for which profile the bundle should be generated
  • name: Bundle name generated by webpack
  • extractVendors: Compile NPM module in a separated file (vendors.bundle.js). By default true.
  • paths: List of files you want to compile for the bundle.

Define new alias

Webpack provide a alias mechanism to facilitate javascript module import. By default, this package provide these following alias:

{
  "vueCli": {
    "alias": {
      "@Foundation": "<foundationScriptsDir>",
      "@Feature": "<featureDir>",
      "@Project": "<projectDir>",
      "@Themes": "<foundationDir>/Core/code/Styles/"
    }
  }
}

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.

In vue.config.js add this configuration:

const config = require('@node-sitecore/config');

const vueConfig = {
  pwa: { // add this
    exclude: [
      /\.map$/,
      /img\/icons\//,
      /manifest\.json$/
    ],
    workboxOptions: {
      swDest: `../../service-worker.${config.currentWebsite}.js`,
      runtimeCaching: []
    }
  }
}

module.exports = config.buildVueConfig(vueConfig);

Then in the registerServiceWorker.js:

/* 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:

<?xml version="1.0"?>
<package>
 <files>
   <file src="build\Website\service-worker.**.js"/>
 </files>
</package>