Nightly Perpetrated Mischief
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    parcel-plugin-vuepublic

    parcel-plugin-vue npm david-dm

    Stability: 1 - Experimental This feature is still under active development and subject to non-backwards compatible changes, or even removal, in any future version. Use of the feature is not recommended in production environments.

    Make Parcel surport Vue single file components.

    【What's the Parcel】【What's the Vue】【What's the Vue single file components】

    Using Plugin

    Using plugins in Parcel could not be any simpler. All you need to do is install them and save in your package.json. Plugins should be named with the prefix parcel-plugin-, e.g. parcel-plugin-foo. Any dependencies listed in package.json with this prefix will be automatically loaded during initialization.

    You must node >= 8

    npm i parcel-plugin-vue -D
     
    # Maybe you should: 
    npm i parcel-bundler -D
     
    npm i vue -S
    npm i vue-template-compiler -D # version must be eq version of vue 
     
    # If no '.babelrc' file, you should 
    npm i babel-plugin-transform-runtime babel-preset-es2015 -D

    Examples

    Make some issues clear

    CSS Extraction

    You can make a file named 'vue.config.js', edit and save it

    module.exports = {
        // If extractCSS is always true, the 'Hot module replacement' will not work.
        extractCSS: process.env.NODE_ENV === 'production'
    };

    For other attributes of 'vue.config.js', you can refer to https://github.com/vuejs/vueify#configuring-options

    Custom Compilers

    The plugin for Vue is using built-in compiler compiles the other lang.

    Those compilers are:

    coffee,babel less,sass,scss,stylus jade,pug

    That will allow you to use other parcel plugins to process a part of a Vue component at next version.

    But now, you need do it yourself, I'm sorry for this.

    You can make a file named 'vue.config.js', edit and save it

    var TypeScriptAsset = require('parcel-bundler/src/assets/TypeScriptAsset.js');
     
    module.exports = {
        customCompilers: {
            ts: function (content, cb, compiler, filePath) {
                let ts = new TypeScriptAsset(filePath, {}, {});
                ts.contents = content;
                ts.process().then((res) => {
                    cb(null, res.js);
                });
            }
        }
    };

    For 'vue.config.js', you can refer to https://github.com/vuejs/vueify#configuring-options

    This Plugin only support '*.vue'

    When you meet this:

    Maybe in your code:

    import Vue from 'vue';
     
    new Vue({
      el: '#app',
      template: '...', // This is reason for Error 
      ...
    });

    You should change to:

    import Vue from 'vue/dist/vue.esm.js';
     
    new Vue({
      el: '#app',
      template: '...',
      ...
    });

    or We recommend more:

    import Vue from 'vue';
    import YourVue from 'YourVue.vue';
     
    const app = new Vue({
      el: '#app',
      render: h => h(Index)
    });

    Keywords

    none

    install

    npm i parcel-plugin-vue

    Downloadslast 7 days

    341

    version

    1.5.0

    license

    ISC

    repository

    github.com

    last publish

    collaborators

    • avatar