You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Dec 26, 2018. It is now read-only.
> [Browserify](http://browserify.org/) transform for [Vue.js](http://vuejs.org/) components
3
+
> [Browserify](http://browserify.org/) transform for [Vue.js](http://vuejs.org/) components, with scoped CSS and component hot-reloading.
4
4
5
5
This transform allows you to write your components in this format:
6
6
@@ -128,7 +128,58 @@ module.exports = function (vueify) {
128
128
}
129
129
```
130
130
131
-
### Compiler API
131
+
### Scoped CSS
132
+
133
+
> Experimental
134
+
135
+
When a `<style>` tag has the `scoped` attribute, its CSS will apply to elements of the current component only. This is similar to the style encapsulation found in Shadow DOM, but doesn't require any polyfills. It is achieved by transforming the following:
136
+
137
+
``` html
138
+
<style scoped>
139
+
.example {
140
+
color: red;
141
+
}
142
+
</style>
143
+
<template>
144
+
<divclass="example">hi</div>
145
+
</template>
146
+
```
147
+
148
+
Into the following:
149
+
150
+
```html
151
+
<style>
152
+
.example[_v-1] {
153
+
color: red;
154
+
}
155
+
</style>
156
+
<template>
157
+
<divclass="example"_v-1>hi</div>
158
+
</template>
159
+
```
160
+
161
+
#### Notes
162
+
163
+
1. You can include both scoped and non-scoped styles in the same component.
164
+
165
+
2. A child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.
166
+
167
+
3. Partials are not affected by scoped styles.
168
+
169
+
### Hot Reload
170
+
171
+
> Experimental
172
+
173
+
To enable hot component reloading, you need to install the [browserify-hmr](https://github.com/AgentME/browserify-hmr) plugin:
174
+
175
+
```bash
176
+
npm install browserify-hmr --save-dev
177
+
watchify -p browserify-hmr index.js -o bundle.js
178
+
```
179
+
180
+
A full setup example with hot reloading is available at [vuejs/vueify-example](https://github.com/vuejs/vueify-example).
181
+
182
+
## Compiler API
132
183
133
184
The compiler API (originally `vue-component-compiler`) is also exposed:
134
185
@@ -147,12 +198,16 @@ And here's a [SublimeText package](https://github.com/vuejs/vue-syntax-highlight
147
198
148
199
## Example
149
200
150
-
For an example setup, see [vuejs/vueify-example](https://github.com/vuejs/vueify-example).
201
+
For an example setup using most of the features mentioned above, see [vuejs/vueify-example](https://github.com/vuejs/vueify-example).
151
202
152
203
If you use Webpack, there's also [vue-loader](https://github.com/vuejs/vue-loader) that does the same thing.
153
204
154
205
## Changelog
155
206
207
+
### 3.0.0
208
+
209
+
- Added support for [scoped CSS](#scoped-css) and [component hot reloading](#hot-reload).
210
+
156
211
### 2.0.1
157
212
158
213
- Built-in lang for ES2015 has been renamed from `es6` to `es`.
0 commit comments