@vitejs/plugin-vue - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

CHANGELOG.md

@@ -0,1 +1,10 @@
+# [1.4.0](https://github.com/vitejs/vite/compare/plugin-vue@1.3.0...plugin-vue@1.4.0) (2021-08-07)
+
+
+### Bug Fixes
+
+* revert update dependency slash to v4 ([#4118](https://github.com/vitejs/vite/issues/4118)) ([#4519](https://github.com/vitejs/vite/issues/4519)) ([9b4fe1f](https://github.com/vitejs/vite/commit/9b4fe1fa68c522878d1bdef87d7aa02ae08e986f))
+
+
+
 # [1.3.0](https://github.com/vitejs/vite/compare/plugin-vue@1.2.5...plugin-vue@1.3.0) (2021-07-27)
@@ -2,0 +11,0 @@

package.json

 {
   "name": "@vitejs/plugin-vue",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "author": "Evan You",

README.md

@@ -85,19 +85,23 @@ # @vitejs/plugin-vue [![npm](https://img.shields.io/npm/v/@vitejs/plugin-vue.svg)](https://npmjs.com/package/@vitejs/plugin-vue)
 
-> Requires `vue@^3.2.0`
+> Requires `vue@^3.2.0` & `@vitejs/plugin-vue@^1.4.0`
 
-By default, files ending in `*.ce.vue` will be processed as native Custom Elements when imported (created with `defineCustomElement` from Vue core):
+Vue 3.2 introduces the `defineCustomElement` method, which works with SFCs. By default, `<style>` tags inside SFCs are extracted and merged into CSS files during build. However when shipping a library of custom elements, it may be desirable to inline the styles as JavaScript strings and inject them into the custom elements' shadow root instead.
 
+Starting in 1.4.0, files ending with `*.ce.vue` will be compiled in "custom elements" mode: its `<style>` tags are compiled into inlined CSS strings and attached to the component as its `styles` property:
+
 ```js
+import { defineCustomElement } from 'vue'
 import Example from './Example.ce.vue'
 
+console.log(Example.styles) // ['/* css content */']
+
 // register
-customElements.define('my-example', Example)
-
-// can also be instantiated
-const myExample = new Example()
+customElements.define('my-example', defineCustomElement(Example))
 ```
 
+Note in custom elements mode there is no need to use `<style scoped>` since the CSS is already scoped inside the shadow DOM.
+
 The `customElement` plugin option can be used to configure the behavior:
 
-- `{ customElement: true }` will import all `*.vue` files as Custom Elements.
+- `{ customElement: true }` will import all `*.vue` files in custom element mode.
 - Use a string or regex pattern to change how files should be loaded as Custom Elements (this check is applied after `include` and `exclude` matches).
@@ -104,0 +108,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

181832

increased by0.44%

Number of lines in readme file

111

increased by3.74%

Worsened metrics

Lines of code

4764

decreased by-0.1%

No dependency changes