diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..0a918b9
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,7 @@
+{
+ "root": true,
+ "extends": "vue",
+ "env": {
+ "mocha": true
+ }
+}
diff --git a/README.md b/README.md
index da918e0..9a42c15 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,13 @@
-# vueify [](https://circleci.com/gh/vuejs/vueify) [](http://badge.fury.io/js/vueify)
+# THIS REPOSITORY IS DEPRECATED
+
+> Note: We are concentrating our efforts on supporting webpack and rollup.
+
+## vueify [](https://circleci.com/gh/vuejs/vueify) [](http://badge.fury.io/js/vueify)
> [Browserify](http://browserify.org/) transform for [Vue.js](http://vuejs.org/) components, with scoped CSS and component hot-reloading.
+**NOTE: master branch now hosts version ^9.0, which only works with Vue ^2.0. Vueify 8.x which works with Vue 1.x is in the [8.x branch](https://github.com/vuejs/vueify/tree/8.x).**
+
This transform allows you to write your components in this format:
``` html
@@ -67,17 +73,6 @@ npm install vueify --save-dev
browserify -t vueify -e src/main.js -o build/build.js
```
-If you are using npm 3+, it no longer auto install the peer dependencies. So you will also have to also install the babel-related dependencies:
-
-``` bash
-npm install\
- babel-core\
- babel-preset-es2015\
- babel-runtime\
- babel-plugin-transform-runtime\
- --save-dev
-```
-
And this is all you need to do in your main entry file:
``` js
@@ -86,9 +81,9 @@ var Vue = require('vue')
var App = require('./app.vue')
new Vue({
- el: 'body',
- components: {
- app: App
+ el: '#app',
+ render: function (createElement) {
+ return createElement(App)
}
})
```
@@ -97,7 +92,7 @@ In your HTML:
``` html
-
+
```
@@ -121,35 +116,34 @@ Make sure to have the `NODE_ENV` environment variable set to `"production"` when
If you are using Gulp, note that `gulp --production` **does not** affect vueify; you still need to explicitly set `NODE_ENV=production`.
-## ES2015 by Default
-
-Vueify automatically transforms the JavaScript in your `*.vue` components using Babel. Write ES2015 today!
+## ES2015 with Babel
-The default Babel (6) options used for Vue.js components are:
+Vueify is pre-configured to work with Babel. Simply install Babel-related dependencies:
-``` js
-{
- "presets": ["es2015"],
- "plugins": ["transform-runtime"]
-}
+``` bash
+npm install\
+ babel-core\
+ babel-preset-es2015\
+ --save-dev
```
-If you wish to override this, you can add a `.babelrc` file at the root of your project:
+Then create a `.babelrc`:
``` json
{
- "presets": ["es2015", "stage-2"],
- "plugins": ["transform-runtime"]
+ "presets": ["es2015"]
}
```
+And voila! You can now write ES2015 in your `*.vue` files. Note if you want to use ES2015 on normal `*.js` files, you will also need [babelify](https://github.com/babel/babelify).
+
You can also configure babel with the `babel` field in `vue.config.js`, which will take the highest priority.
-## Enabling Pre-Processors
+## Enabling Other Pre-Processors
-You need to install the corresponding node modules to enable the compilation. e.g. to get stylus compiled in your Vue components, do `npm install stylus --save-dev`.
+For other pre-processors, you also need to install the corresponding node modules to enable the compilation. e.g. to get stylus compiled in your Vue components, do `npm install stylus --save-dev`.
-These are the built-in preprocessors:
+These are the preprocessors supported by vueify out of the box:
- stylus
- less
@@ -158,13 +152,9 @@ These are the built-in preprocessors:
- pug
- coffee-script (use `coffee` in [config section](#configuring-options))
-## Autoprefix by Default
-
-Starting in 5.0.0, all CSS output via vueify will be autoprefixed by default. See [config section](#configuring-options) below on customizing the options.
-
## PostCSS
-Vueify uses PostCSS for scoped CSS rewrite and autoprefixing. You can also provide your own PostCSS plugins! See [config section](#configuring-options) below for an example.
+Vueify uses PostCSS for scoped CSS rewrite. You can also provide your own PostCSS plugins! See [config section](#configuring-options) below for an example.
## Configuring Options
@@ -178,15 +168,6 @@ module.exports = {
},
// provide your own postcss plugins
postcss: [...],
- // configure autoprefixer
- autoprefixer: {
- browsers: ['last 2 versions']
- },
- // configure html minification in production mode
- // see https://github.com/kangax/html-minifier#options-quick-reference
- htmlMinifier: {
- // ...
- },
// register custom compilers
customCompilers: {
// for tags with lang="ts"
@@ -209,9 +190,7 @@ Example using custom PostCSS plugin:
var cssnext = require('cssnext')
module.exports = {
- postcss: [cssnext()],
- // disable autoprefixer since cssnext comes with it
- autoprefixer: false
+ postcss: [cssnext()]
}
```
@@ -251,9 +230,7 @@ browserify('./main.js')
.pipe(fs.createWriteStream("bundle.js"))
```
-### Scoped CSS
-
-> Experimental
+## Scoped CSS
When a `
diff --git a/test/test.js b/test/test.js
index 5081c87..dfcf92a 100644
--- a/test/test.js
+++ b/test/test.js
@@ -3,13 +3,13 @@ process.env.VUEIFY_TEST = true
const fs = require('fs')
const path = require('path')
const expect = require('chai').expect
-const hash = require('hash-sum')
const rimraf = require('rimraf')
const mkdirp = require('mkdirp')
const browserify = require('browserify')
const vueify = require('../index')
const jsdom = require('jsdom')
const vueCompiler = require('vue-template-compiler')
+const transpile = require('vue-template-es2015-compiler')
const genId = require('../lib/gen-id')
const tempDir = path.resolve(__dirname, './temp')
@@ -37,9 +37,21 @@ function test (file, assert) {
})
}
+function testCssExtract (file, assert) {
+ it(file, done => {
+ fs.writeFileSync(mockEntry, 'window.vueModule = require("../fixtures/' + file + '.vue")')
+ browserify(mockEntry)
+ .transform(vueify)
+ .plugin('./plugins/extract-css', { out: { write: assert, end: done }})
+ .bundle((err, buf) => {
+ if (err) return done(err)
+ })
+ })
+}
+
function assertRenderFn (options, template) {
const compiled = vueCompiler.compile(template)
- expect(options.render.toString()).to.equal('function (){' + compiled.render + '}')
+ expect(options.render.toString()).to.equal(transpile('function render() {' + compiled.render + '}'))
}
describe('vueify', () => {
@@ -122,4 +134,8 @@ describe('vueify', () => {
var id = 'data-v-' + genId(require.resolve('./fixtures/media-query.vue'))
expect(style).to.contain('@media print {\n .foo[' + id + '] {\n color: #000;\n }\n}')
})
+
+ testCssExtract('style-export', css => {
+ expect(css).to.equal('h2 {color: red;}')
+ })
})