Pangolin.jsVue.js
Legacy version
You’re browsing the documentation for v5. View the docs for the latest version →
Pangolin.js uses webpack under the hood and generates its configuration with webpack-chain. This allows to tap into the loaders and plugins and extend the pipeline.
Installation
Install Vue.js
bash
# Install Vue.js as a dependency
npm install vue
# Install vue-loader and vue-template-compiler as development dependencies
npm install --save-dev vue-loader vue-template-compiler webpack
Install ESLint plugin (optional)
bash
npm install --save-dev eslint-plugin-vue
Configuration
pangolin.config.js
Extend your pangolin.config.js with the following settings:
js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
chain (config) {
/* eslint-disable indent */
config.module
.rule('vue')
.test(/\.vue$/)
.use('vue')
.loader('vue-loader')
config.resolve
.extensions
.add('.vue')
config.plugin('vue')
.use(VueLoaderPlugin)
/* eslint-enable indent */
}
}
.eslintrc.js (optional)
If you chose to install the ESLint plugin for Vue, you can extend your ESLint configuration with the recommended rules:
js
module.exports = {
root: true,
extends: [
'@pangolinjs',
'plugin:vue/recommended'
]
}
Usage
Now you are ready to import single file components in Pangolin.js.