Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vuejs/vueify
Browserify transform for single-file Vue components
https://github.com/vuejs/vueify
Last synced: about 2 months ago
JSON representation
Browserify transform for single-file Vue components
- Host: GitHub
- URL: https://github.com/vuejs/vueify
- Owner: vuejs
- License: mit
- Archived: true
- Created: 2014-10-02T22:22:47.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-12-25T22:58:44.000Z (over 5 years ago)
- Last Synced: 2024-04-13T21:44:25.021Z (5 months ago)
- Language: JavaScript
- Size: 197 KB
- Stars: 1,171
- Watchers: 64
- Forks: 152
- Open Issues: 104
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - **vueify ★409** - Vue component transform for Browserify. (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Development Tools)
- awesome-vuejs - **vueify ** - Vue component transform for Browserify. (Awesome Vue.js / Development Tools)
- awesome-vue-js - Vueify
README
# 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
// app.vue
.red {
color: #f00;
}
{{msg}}
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
```
You can also mix preprocessor languages in the component file:
``` vue
// app.vue
.red
color #f00
h1(class="red") {{msg}}
module.exports =
data: ->
msg: 'Hello world!'
```
And you can import using the `src` attribute:
``` html
```
Under the hood, the transform will:
- extract the styles, compile them and insert them with the `insert-css` module.
- extract the template, compile it and add it to your exported options.
You can `require()` other stuff in the `` as usual. ~~Note that for CSS-preprocessor @imports, the path should be relative to your project root directory.~~ Starting in 7.0.0, `@import` in LESS, SASS and Stylus files can be either relative to your build tool root working directory, or to the file being edited. Or one can set import paths in options.
## Usage
``` bash
npm install vueify --save-dev
browserify -t vueify -e src/main.js -o build/build.js
```
And this is all you need to do in your main entry file:
``` js
// main.js
var Vue = require('vue')
var App = require('./app.vue')
new Vue({
el: '#app',
render: function (createElement) {
return createElement(App)
}
})
```
In your HTML:
``` html
<body>
<div id="app"></div>
<script src="build.js">