vue-sfc-split

Convert SFCs for use without build

What it does

• Converts .vue files into .js and .css files
• Includes template into script
• Auto-attaches generated css file
• Preserves scoped styles
• Supports SCSS
• Maintains structure
• Rewrites imorts

Installation & Usage

Global

Install:

npm i -g vue-sfc-split

Run from project root:

vue-sfc-split

Local (npm scripts)

Install:

npm i vue-sfc-split

Add npm script to package.json:

"scripts": {
  "split": "vue-sfc-split"
},

Run from project root:

npm run split

Options

--entry starting directory

--publicPath index of application

--ignore patterns to ignore directories

--noscope ignore scoped css, and treat it like usual css

--alias alias for import rewriting

--dest destination folder

--entry

Starting point directory from which .vue files will be targeted recursively

Defaults to current directory

vue-sfc-split --entry=src

--publicPath

Directory where your index.html will live

Style attachment paths will be relative to this

Defaults to same as entry

vue-sfc-split --publicPath=.

--ignore

Comma separated list of glob patterns

node_modules is always ignored

vue-sfc-split --ignore=directory/*,directory-recursive/**

--noscope

If this is specified scoped css will have no effect, all styles will be treated as unscoped

vue-sfc-split --noscope

--alias

Comma separated alias:replacement pairs to be rewritten in import statements

Resulting paths will be relative to the current module

vue-sfc-split --alias=@:src/components

--dest

Where the output files will go

Default: dist/

Set this to an empty string to create .js and .css files next to original .vue files

vue-sfc-split --dest=""

Scope

Scoped styles are processed similarly to how vue does it

Custom data-scope-* attribute will be added to scoped style selectors and template elements

Scope name is created based on file name and its path, keeping generated scope names predictable and non-duplicating

For example this in file hello.vue

<div>Hola</div>
<style scoped>
div {
  color: pink;
}
</style>

Will get converted to this

<div data-scope-hello>Hola</div>

div[data-scope-hello] {
  color: pink;
}

This can be disabled by specifying --noscope

Imports

In the output files all .vue imports will automatically be rewritten to target newly created .js files instead

Style attachment

Generated .css files will be automatically attached from generated .js files in this manner:

fetch('hello.css')
  .then(res => res.text())
  .then(style => document.head.insertAdjacentHTML('beforeend', '<style>'+style+'</style>'))

I/O example

Input

hello.vue:

<template>
   <div class="container">
      <h1>{{text}}</h1>
      <Two />
   </div>
</template>

<script>
import Two from './two.vue'

export default {
   name: 'One',
   components: { Two },
   data() {
      return {
         text: 'Hello from component One'
      }
   },
}
</script>

<style scoped>
.container {
   background: silver;
}
</style>

Output

hello.js:

import Two from './two.js'

export default {
  template: `
<div class="container" data-scope-hello>
   <h1>{{text}}</h1>
   <Two></Two>
</div>`,
   name: 'One',
   components: { Two },
   data() {
      return {
         text: 'Hello from component One'
      }
   },
}

// attach styles
fetch('hello.css').then(res => res.text()).then(style => document.head.insertAdjacentHTML('beforeend', '<style>'+style+'</style>'))

hello.css

.container[data-scope-hello] {
   background: silver;
}