Skip to content

juanfernandoe/vue-separate-files-webpack-loader

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue separate files Webpack loader

npm npm Build Status Coverage Status Known Vulnerabilities Maintainability

Creates .vue single file components on fly, allowing you to have clean separated components files and still enjoy advantages of vue-loader.

  • Handles files by their names (instead loading of all files in folder) and creates .vue file on fly (instead creating physical one)
  • Allows to add custom attributes through options.global, options[FILE_TYPE] and options[TAG_NAME]
  • Allows to handle vue custom blocks
  • Allows to have scoped style by component

Based on these ideas vue-builder-webpack-plugin and vue-separate-files-loader.

Example application

See this repository.

Install

npm i -D vue-separate-files-webpack-loader

or

yarn add -D vue-separate-files-webpack-loader

Usage

Configuration

Loader must have precedence before vue-loader.

rules: [
  {
    // notice modified file test
    test: /\.vue\./,
    use: [
      {
        loader: 'vue-loader',
        options: {/* usual vue-loader options */}
      },
      {
        loader: 'vue-separate-files-webpack-loader',
        options: {
          global: {
            // all files will have these
            attr: 'value'
          },
          sass: {
            // only SASS files will have these
            attr: 'value'
          },
          style: {
            // only style files will have these
            attr: 'value'
          }
        }
      }
    ]
  }
]

Supported file types

These file types are supported and automatically assigned to proper tag type.

  • html, jade, pug
  • js, jsx, coffee, ts, tsx
  • css, sass, scss, styl, less

How it works

Loader check files with .vue. within the name and creates actual .vue file structure on fly

Example

Taken this component structure

Component.vue.js
Component.vue.scoped.scss
Component.vue.pug

Generated structure

<template src="Component.vue.pug" lang="pug"></template>
<style src="Component.vue.scss" lang="scss" scoped></style>
<script src="Component.vue.js"></script>

Custom block support

Loader allows to use vue custom blocks. Simply define file with proper extension and it will be used as tag name.

Example

Component file

Component.vue.docs

Generated structure

<docs src="Component.vue.docs"></docs>

About

Vue separated components loader for Webpack

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 95.9%
  • HTML 4.1%