This repository has been archived by the owner. It is now read-only.
⚠️ parcel-bundler/parcel @1.7.0 support Vue Now. This plugin will be not recommended.
Branch: develop
Clone or download
Latest commit b6bc02e Mar 30, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update ISSUE_TEMPLATE.md Dec 28, 2017
examples Support file separation Mar 8, 2018
src patch(hmr): use hostname for WS instantiation Mar 21, 2018
test fixed hmr Dec 17, 2017
.gitignore init Dec 11, 2017
.npmignore fixed hmr Dec 17, 2017
README.md Update README.md Mar 29, 2018
index.js fixed hmr Dec 17, 2017
package-lock.json fixed #12 Jan 3, 2018
package.json update ver Jan 3, 2018
vue.config.js update README.md Dec 20, 2017
yarn.lock update jsPackager Feb 19, 2018

README.md

❗️❗️❗️parcel-bundler/parcel @1.7.0 support Vue Now ❗️❗️❗️

⚠️ This plugin will be not recommended.

Maybe I will be forgotten, but I will be continue.

Nice to meet you at parcel-plugin-eslint.

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 support 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:

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

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(YourVue)
});