Product
Introducing Socket Optimize
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
@vitejs/plugin-vue
Advanced tools
> 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.
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.
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()]
}
export interface Options {
include?: string | RegExp | (string | RegExp)[]
exclude?: string | RegExp | (string | RegExp)[]
ssr?: boolean
isProduction?: boolean
/**
* Transform Vue SFCs into custom elements (requires Vue >= 3.2.0)
* - `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)[]
/**
* Enable Vue ref transform (experimental).
* https://github.com/vuejs/vue-next/tree/master/packages/ref-transform
*
* **requires Vue \>= 3.2.5**
*
* - `true`: transform will be enabled for all vue,js(x),ts(x) files except
* those inside node_modules
* - `string | RegExp`: apply to vue + only matched files (will include
* node_modules, so specify directories in necessary)
* - `false`: disable in all cases
*
* @default false
*/
refTransform?: boolean | string | RegExp | (string | RegExp)[]
// options to pass on to vue/compiler-sfc
script?: Partial<SFCScriptCompileOptions>
template?: Partial<SFCTemplateCompileOptions>
style?: Partial<SFCStyleCompileOptions>
}
@vue/compiler-dom
:import vue from '@vitejs/plugin-vue'
export default {
plugins: [
vue({
template: {
compilerOptions: {
// ...
}
}
})
]
}
import vue from '@vitejs/plugin-vue'
const vueI18nPlugin = {
name: 'vue-i18n',
transform(code, id) {
if (!/vue&type=i18n/.test(id)) {
return
}
if (/\.ya?ml$/.test(id)) {
code = JSON.stringify(require('js-yaml').load(code.trim()))
}
return `export default Comp => {
Comp.i18n = ${code}
}`
}
}
export default {
plugins: [vue(), vueI18nPlugin]
}
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.
The npm package @vitejs/plugin-vue receives a total of 2,095,995 weekly downloads. As such, @vitejs/plugin-vue popularity was classified as popular.
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.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.