README

@constgen/neutrino-vue-loader

Neutrino middleware for Vue files

This middleware already includes @constgen/neutrino-babel-loader

Features

This middleware enables many features by default with zero configuration

Typescript support
Decorators
Class properties
Babel transpilation according to browserlist
EcmaScript polyfills
JSX syntax
Automatic Vue pragma injection to every JSX fragment

Requirements

Node.js v10+
Neutrino v9
Webpack v4
Vue 2

Installation

@constgen/neutrino-vue-loader can be installed from NPM. You should install it to "dependencies" (--save) or "devDependncies" (--save-dev) depending on your goal.

npm install --save @constgen/neutrino-vue-loader

Usage

In preset

Require this package and plug it into Neutrino. The following shows how you can pass an options object to the middleware, showing the defaults:

let vueLoader = require('@constgen/neutrino-vue-loader')

neutrino.use(vueLoader({
   babel    : {}, // custom Babel options
   polyfills: false, // enable EcmaScript polyfills
   browsers : ['defaults'], // replace browserlist config
   node     : undefined, // node version in case of server rendering
   include  : [], // include strategy is always used and you can only extend what is included besides `neutrino.options.source` and `neutrino.options.tests`
   exclude  : [] // exclude something from processing that is included
}))

You may enable usage of .browserslistrc file in your project by setting browsers option to any falsy value

neutrino.use(vueLoader({
   browsers: undefined // inherit config from `.browserslistrc` or disable if absent
}))

In neutrinorc

The middleware also may be used together with another presets in Neutrino rc-file, e.g.:

.neutrinorc.js

let vueLoader = require('@constgen/neutrino-vue-loader')

module.exports = {
   use: [
      vueLoader()
   ]
}

JSX

JSX syntax is supported with some syntactic sugar. For more details look at https://github.com/vuejs/jsx.

To use JSX you can just return JSX expressions from arrow functions or Vue Component render() method.

src/Heading.vue

<script>
export default ({ props, listeners, children }) => {
   let onClick = listeners.click || function () {}

   return (
      <h1 id={props.id}>
         <a href="##" onClick={onClick}>
            {children}
         </a>
      </h1>
   )
}
</script>

src/index.vue

<script>
import Heading from './Heading'

export default {
   name: 'Index',
   render () {
      return (
         <div>
            <Heading>Hello</Heading>
            {this.$children}
         </div>
      )
   }
}
</script>

Usage no npm install needed!