vue-separate-webpack-plugin

Are you a Vue.js fan? Do you believe in separation of concerns AND files? Do you use webpack? … You probably need this plugin… 😎

Description

vue-separate-webpack-plugin is a webpack resolver plugin that allows you to write Vue.js components into separate files while using vue-loader, HRM and without creating any physical or temporary .vue file.

Install

npm i -D vue-separate-webpack-plugin

or

yarn add -D vue-separate-webpack-plugin

Getting started

// webpack.config.js

const { VueSeparatePlugin } = require('vue-separate-webpack-plugin')

module.exports = {
  resolve: {
    plugins: [new VueSeparatePlugin()]
  }
}

With @vue/cli

// vue.config.js

const { VueSeparatePlugin } = require('./dev/plugin')

module.exports = {
  chainWebpack: config => {
    // prettier-ignore
    config
      .resolve
      .plugin('vue-separate-webpack-plugin')
      .use(VueSeparatePlugin)
  }
}

Option

Passed as regular Object.

| Property | Type | Default | Description | | -------- | -------- | ------- | ------------------------------------------------- | | root | string | 'src' | Root/src folder where your components are located |

How it works

Simply create your separated files side by side:

• Component.vue.html (pug|jade)
• Component.vue.css (scss|sass|less|styl|stylus)
• Component.vue.js (ts|coffee)

Then, import your component:

import Component from 'Component.vue'

That's it!

Scoped CSS

Component.vue.scoped.css (scss|sass|less|styl|stylus)

Works alongside with Component.vue.css

Functional components

Component.vue.functional.html (pug|jade)

Custom blocks

Component.vue.custom

Inspiration

Inspired by vuemaker-webpack-plugin and vue-separate-files-webpack-loader Thanks to webpack-virtual-modules

How to contribute

If you want to report a bug or if you just want to request for a new feature/improvement, please follow those instructions before.

Thanks for taking time to contribute to vue-separate-webpack-plugin :+1: