![Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack](https://cdn.sanity.io/images/cgdhsj6q/production/6af25114feaaac7179b18127c83327568ff592d1-1024x1024.webp?w=800&fit=max&auto=format)
Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
@vitejs/plugin-vue
Advanced tools
Package description
The @vitejs/plugin-vue package is a plugin for Vite, a modern frontend build tool, that enables Vue.js single-file component (SFC) support. It allows developers to use Vue 3 features within Vite projects, including template compilation, hot module replacement (HMR), and more.
Single-File Component Support
Enables the use of Vue.js single-file components (.vue files) by handling their parsing and compilation.
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
Hot Module Replacement
Supports HMR for Vue components, allowing for a more efficient development experience by enabling instant feedback on code changes without a full page reload.
if (import.meta.hot) {
import.meta.hot.accept('./some-module.js', (newModule) => {
// Handle the module update
});
}
Template Compilation
Compiles Vue component templates into render functions, improving performance and enabling the use of Vue's template syntax.
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, world!'
};
}
};
</script>
vue-loader is a webpack plugin for transforming Vue components written in the Single-File Component (SFC) format. It is similar to @vitejs/plugin-vue but is specifically designed for webpack instead of Vite.
rollup-plugin-vue is a plugin for Rollup that allows you to integrate Vue SFCs into your Rollup builds. It offers similar functionality to @vitejs/plugin-vue but is tailored for the Rollup module bundler.
Nuxt is a higher-level framework built on top of Vue.js that provides its own way of handling Vue files, along with server-side rendering and static site generation. It can be seen as an alternative to using Vite with @vitejs/plugin-vue for building Vue applications.
Readme
Note: as of
vue
3.2.13+ and@vitejs/plugin-vue
1.9.0+,@vue/compiler-sfc
is no longer required as a peer dependency.
// vite.config.js
import vue from '@vitejs/plugin-vue'
export default {
plugins: [vue()],
}
For JSX / TSX support, @vitejs/plugin-vue-jsx
is also needed.
export interface Options {
include?: string | RegExp | (string | RegExp)[]
exclude?: string | RegExp | (string | RegExp)[]
isProduction?: boolean
// options to pass on to vue/compiler-sfc
script?: Partial<
Omit<
SFCScriptCompileOptions,
| 'id'
| 'isProd'
| 'inlineTemplate'
| 'templateOptions'
| 'sourceMap'
| 'genDefaultAs'
| 'customElement'
| 'defineModel'
>
>
template?: Partial<
Omit<
SFCTemplateCompileOptions,
| 'id'
| 'source'
| 'ast'
| 'filename'
| 'scoped'
| 'slotted'
| 'isProd'
| 'inMap'
| 'ssr'
| 'ssrCssVars'
| 'preprocessLang'
>
>
style?: Partial<
Omit<
SFCStyleCompileOptions,
| 'filename'
| 'id'
| 'isProd'
| 'source'
| 'scoped'
| 'cssDevSourcemap'
| 'postcssOptions'
| 'map'
| 'postcssPlugins'
| 'preprocessCustomRequire'
| 'preprocessLang'
| 'preprocessOptions'
>
>
/**
* Transform Vue SFCs into custom elements.
* - `true`: all `*.vue` imports are converted into custom elements
* - `string | RegExp`: matched files are converted into custom elements
*
* @default /\.ce\.vue$/
*/
customElement?: boolean | string | RegExp | (string | RegExp)[]
/**
* Use custom compiler-sfc instance. Can be used to force a specific version.
*/
compiler?: typeof _compiler
}
When @vitejs/plugin-vue
compiles the <template>
blocks in SFCs, it also converts any encountered asset URLs into ESM imports.
For example, the following template snippet:
<img src="../image.png" />
Is the same as:
<script setup>
import _imports_0 from '../image.png'
</script>
<img :src="_imports_0" />
By default the following tag/attribute combinations are transformed, and can be configured using the template.transformAssetUrls
option.
{
video: ['src', 'poster'],
source: ['src'],
img: ['src'],
image: ['xlink:href', 'href'],
use: ['xlink:href', 'href']
}
Note that only attribute values that are static strings are transformed. Otherwise, you'd need to import the asset manually, e.g. import imgUrl from '../image.png'
.
vue/compiler-sfc
:import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue({
template: {
compilerOptions: {
// ...
},
transformAssetUrls: {
// ...
},
},
}),
],
}
import vue from '@vitejs/plugin-vue'
import yaml from 'js-yaml'
const vueI18nPlugin = {
name: 'vue-i18n',
transform(code, id) {
// if .vue file don't have <i18n> block, just return
if (!/vue&type=i18n/.test(id)) {
return
}
// parse yaml
if (/\.ya?ml$/.test(id)) {
code = JSON.stringify(yaml.load(code.trim()))
}
// mount the value on the i18n property of the component instance
return `export default Comp => {
Comp.i18n = ${code}
}`
},
}
export default {
plugins: [vue(), vueI18nPlugin],
}
Create a file named Demo.vue
, add lang="yaml"
to the <i18n>
blocks, then you can use the syntax of YAML
:
<template>Hello</template>
<i18n lang="yaml">
message: 'world'
fullWord: 'hello world'
</i18n>
message
is mounted on the i18n property of the component instance, you can use like this:
<script setup lang="ts">
import Demo from 'components/Demo.vue'
</script>
<template>
<Demo /> {{ Demo.i18n.message }}
<div>{{ Demo.i18n.fullWord }}</div>
</template>
Requires
vue@^3.2.0
&@vitejs/plugin-vue@^1.4.0
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:
import { defineCustomElement } from 'vue'
import Example from './Example.ce.vue'
console.log(Example.styles) // ['/* css content */']
// register
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 in custom element mode.include
and exclude
matches).MIT
FAQs
> Note: as of `vue` 3.2.13+ and `@vitejs/plugin-vue` 1.9.0+, `@vue/compiler-sfc` is no longer required as a peer dependency.
We found that @vitejs/plugin-vue demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.