Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@vitejs/plugin-vue2
Advanced tools
@vitejs/plugin-vue2 is a Vite plugin that provides support for Vue 2.x single-file components (SFCs). It allows developers to leverage the fast and modern build tool Vite while working with Vue 2 projects.
Vue 2 Single File Component Support
This feature allows you to use Vue 2 single-file components (SFCs) in your Vite project. The code sample demonstrates a basic setup where a Vue 2 component is imported and mounted to a DOM element.
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
Hot Module Replacement (HMR)
This feature enables Hot Module Replacement (HMR) for Vue 2 components, allowing for instant updates without a full page reload. The code sample shows how to set up HMR in a Vue 2 project using Vite.
import { createApp } from 'vue';
import App from './App.vue';
if (import.meta.hot) {
import.meta.hot.accept();
}
createApp(App).mount('#app');
Custom Block Support
This feature allows the use of custom blocks in Vue 2 single-file components. The code sample demonstrates a Vue 2 SFC with a custom block.
<template>
<div>{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello World'
};
}
};
</script>
<style scoped>
div {
color: red;
}
</style>
<custom-block>
This is a custom block
</custom-block>
vue-loader is a webpack loader for Vue.js components. It allows you to write Vue components in a single file with HTML, JavaScript, and CSS. Compared to @vitejs/plugin-vue2, vue-loader is designed for use with webpack rather than Vite.
rollup-plugin-vue is a Rollup plugin for Vue.js components. It enables the use of Vue single-file components in Rollup projects. While @vitejs/plugin-vue2 is tailored for Vite, rollup-plugin-vue serves a similar purpose for Rollup.
vite-plugin-vue2 is another Vite plugin for Vue 2.x single-file components. It provides similar functionality to @vitejs/plugin-vue2, allowing developers to use Vue 2 with Vite.
Note: this plugin only works with Vue@^2.7.0.
// vite.config.js
import vue from '@vitejs/plugin-vue2'
export default {
plugins: [vue()]
}
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<Pick<SFCScriptCompileOptions, 'babelParserPlugins'>>
template?: Partial<
Pick<
SFCTemplateCompileOptions,
| 'compiler'
| 'compilerOptions'
| 'preprocessOptions'
| 'transpileOptions'
| 'transformAssetUrls'
| 'transformAssetUrlsOptions'
>
>
style?: Partial<Pick<SFCStyleCompileOptions, 'trim'>>
}
When @vitejs/plugin-vue2
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-vue2'
export default {
plugins: [
vue({
template: {
compilerOptions: {
// ...
},
transformAssetUrls: {
// ...
}
}
})
]
}
import vue from '@vitejs/plugin-vue2'
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]
}
MIT
FAQs
> Note: this plugin only works with Vue@^2.7.0.
We found that @vitejs/plugin-vue2 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
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.