Vue CLI plugin to scaffold CNAM front-end projects
If you want to scaffold a new project, you should use the Vue Dash Preset.
But if you want to add it to an existing project, you should install the plugin and then invoke it:
# Install the plugin
yarn add -D @cnamts/vue-cli-plugin-vue-dash
# Invoke it
vue invoke @cnamts/vue-dash
By default, this will not update your project files, but if you want to render the Vue Dash template anyway, you can use the --render-template
option:
vue invoke @cnamts/vue-dash -- --render-template
This plugin contains the template to scaffold new projects, but also some extra features described below.
In our applications, there is env var files located in public/js/config
.
When cloning the project, you have two files: config.js.env
and config.js
. The first is used when deploying your project, and the later serves as a template to create the config.js
file locally.
This plugin augments the default vue-cli-service serve
command by copying config.js.dist
to config.js
if the file doesn't exists.
This way you have no setup to do when cloning a project!
By default, when importing the Vue Dot library, all components are registered globally.
You can reduce the final size of your application by importing only the components that you use.
For this, the vueDotLoader
is used in combinaison with the Vuetify Loader plugin:
// vue.config.js
const { vueDotLoader } = require('@cnamts/vue-cli-plugin-vue-dash/vueDotLoader');
module.exports = {
chainWebpack: config => {
// Auto-load Vue Dot components
config.plugin('VuetifyLoaderPlugin').tap(vueDotLoader);
}
};