Product
Introducing Java Support in Socket
We're excited to announce that Socket now supports the Java programming language.
@vitejs/plugin-vue
Advanced tools
Note: requires `@vue/compiler-sfc` as peer dependency. This is largely a port of `rollup-plugin-vue` with some vite-specific tweaks.
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: requires @vue/compiler-sfc
as peer dependency. This is largely a port of rollup-plugin-vue
with some vite-specific tweaks.
// 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
// 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').safeLoad(code.trim()))
}
return `export default Comp => {
Comp.i18n = ${code}
}`
}
}
export default {
plugins: [vue(), vueI18nPlugin]
}
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 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.
Security News
Deno 2.0 is now available with enhanced package management, full Node.js and npm compatibility, improved performance, and support for major JavaScript frameworks.