Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@vitejs/plugin-vue2
Advanced tools
> [!CAUTION] > Vue 2 has reached EOL, and this project is no longer actively maintained.
@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.
[!CAUTION] Vue 2 has reached EOL, and this project is no longer actively maintained.
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
> [!CAUTION] > Vue 2 has reached EOL, and this project is no longer actively maintained.
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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.