1. vite-plugin-vue2
Vite plugin for Vue2
vite-plugin-vue2
Package: vite-plugin-vue2
Created by: underfin
Last modified: Mon, 19 Dec 2022 20:58:21 GMT
Version: 2.0.3
License: MIT
Downloads: 182,247
Repository: https://github.com/underfin/vite-plugin-vue2

Install

npm install vite-plugin-vue2
yarn add vite-plugin-vue2

vite-plugin-vue2

NPM version

⚠️ With the release of Vue 2.7, Vite now provides the official Vue 2 plugin @vitejs/plugin-vue2. Thereby this plugin has entered maintenance mode and will only support Vue 2.6 or earlier. This project will reach End of Life by the end of 2022.

Install

 npm install vite-plugin-vue2 -D
 // vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'

export default {
  plugins: [
    createVuePlugin(/* options */)
  ],
}

Options

vueTemplateOptions

Type: Object

Default: { compilerOptions :{ whitespace: 'condense' } }

Note { whitespace: 'condense' } behavior

  • A whitespace-only text node between element tags is removed if it contains new lines. Otherwise, it is condensed into a single space.

  • Consecutive whitespaces inside a non-whitespace-only text node are condensed into a single space.

Using condense mode will result in smaller compiled code size and slightly improved performance. However, it will produce minor visual layout differences compared to plain HTML in certain cases,if you want to keep whitespace behavior, please set { whitespace: 'preserve' }

The options for @vue/component-compiler-utils.

jsx

Type: Boolean

Default: false

The options for jsx transform.

jsxOptions

Type: Object

The options for @vue/babel-preset-jsx.

target

Type: String

The options for esbuild to transform script code

Todo

  • SSR Build
  • Sourcemap

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin