vue-component-compiler

Compiler for single file Vue components

vue-component-compiler has been merged into vueify.
Last updated 9 years ago by yyx990803 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ gnpm install vue-component-compiler 
SYNC missed versions from official npm registry.

vue-component-compiler

npm version Build Status

This module compile a single file Vue component like the one below into a CommonJS module that can be used in Browserify/Webpack/Component/Duo builds.

Currently supported preprocessors are:

  • stylus
  • less
  • scss (via node-sass)
  • jade
  • coffee-script
  • myth
  • es6 (via 6to5 aka babel)

Also see Registering Custom Pre-Processors.

Example

// app.vue
<style>
  .red {
    color: #f00;
  }
</style>

<template>
  <h1 class="red">{{msg}}</h1>
</template>

<script>
  module.exports = {
    data: function () {
      return {
        msg: 'Hello world!'
      }
    }
  }
</script>

You can also mix preprocessor languages in the component file:

// app.vue
<style lang="stylus">
.red
  color #f00
</style>

<template lang="jade">
h1(class="red") {{msg}}
</template>

<script lang="coffee">
module.exports =
  data: ->
    msg: 'Hello world!'
</script>

And you can import using the src attribute:

<style lang="stylus" src="style.styl"></style>
<template src="template.html"></template>
<script src="./scripts/main.js"></script>

API

var compiler = require('vue-component-compiler')
// filePath should be an absolute path, and is optional if
// the fileContent doesn't contain src imports
compiler.compile(fileContent, filePath, function (err, result) {
  // result is a common js module string
})

Registering Custom Pre-Processors

Create a vue.config.js file at where your build command is run (usually the root level of your project):

module.exports = function (compiler) {
  
  // register a compile function for <script lang="es">
  compiler.register({
    lang: 'es',
    type: 'script',
    compile: function (content, cb) {
      // transform the content...
      cb(null, content)
    }
  })

}

Current Tags

  • 2.0.0                                ...           latest (9 years ago)

18 Versions

  • 2.0.0 [deprecated]           ...           9 years ago
  • 1.1.12 [deprecated]           ...           9 years ago
  • 1.1.11 [deprecated]           ...           9 years ago
  • 1.1.10 [deprecated]           ...           10 years ago
  • 1.1.9 [deprecated]           ...           10 years ago
  • 1.1.8 [deprecated]           ...           10 years ago
  • 1.1.7 [deprecated]           ...           10 years ago
  • 1.1.6 [deprecated]           ...           10 years ago
  • 1.1.5 [deprecated]           ...           10 years ago
  • 1.1.4 [deprecated]           ...           10 years ago
  • 1.1.3 [deprecated]           ...           10 years ago
  • 1.1.2 [deprecated]           ...           10 years ago
  • 1.1.1 [deprecated]           ...           10 years ago
  • 1.1.0 [deprecated]           ...           10 years ago
  • 1.0.3 [deprecated]           ...           10 years ago
  • 1.0.2 [deprecated]           ...           10 years ago
  • 1.0.1 [deprecated]           ...           10 years ago
  • 1.0.0 [deprecated]           ...           10 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 11
Last Day 0
Last Week 11
Last Month 0
Dependencies (4)
Dev Dependencies (8)

Copyright 2013 - present © cnpmjs.org | Home |