https://github.com/vitejs/vite-plugin-vue2

Vite plugin for Vue 2.7
https://github.com/vitejs/vite-plugin-vue2

Last synced: about 2 months ago
JSON representation

Vite plugin for Vue 2.7

• Host: GitHub
• URL: https://github.com/vitejs/vite-plugin-vue2
• Owner: vitejs
• License: mit
• Created: 2022-06-17T03:01:04.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-31T08:07:46.000Z (4 months ago)
• Last Synced: 2024-06-19T12:43:55.941Z (3 months ago)
• Language: TypeScript
• Size: 149 KB
• Stars: 536
• Watchers: 9
• Forks: 45
• Open Issues: 42
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-vite - v2 - Official Vue 2 support. (Plugins / Vue)
• awesome-vite - v2 - Official Vue 2 support. (Plugins / Vue)

README

        
# @vitejs/plugin-vue2 [![npm](https://img.shields.io/npm/v/@vitejs/plugin-vue2.svg)](https://npmjs.com/package/@vitejs/plugin-vue2)

> [!CAUTION]

> Vue 2 has reached EOL, and this project is no longer actively maintained.

---

> Note: this plugin only works with Vue@^2.7.0.

```js

// vite.config.js

import vue from '@vitejs/plugin-vue2'

export default {

  plugins: [vue()]

}

```

## Options

```ts

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>

  template?: Partial<

    Pick<

      SFCTemplateCompileOptions,

      | 'compiler'

      | 'compilerOptions'

      | 'preprocessOptions'

      | 'transpileOptions'

      | 'transformAssetUrls'

      | 'transformAssetUrlsOptions'

    >

  >

  style?: Partial>

}

```

## Asset URL handling

When `@vitejs/plugin-vue2` compiles the `` blocks in SFCs, it also converts any encountered asset URLs into ESM imports.

For example, the following template snippet:

```vue



```

Is the same as:

```vue

import _imports_0 from '../image.png'

```

```vue



```

By default the following tag/attribute combinations are transformed, and can be configured using the `template.transformAssetUrls` option.

```js

{

  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'`.

## Example for passing options to `vue/compiler-sfc`:

```ts

import vue from '@vitejs/plugin-vue2'

export default {

  plugins: [

    vue({

      template: {

        compilerOptions: {

          // ...

        },

        transformAssetUrls: {

          // ...

        }

      }

    })

  ]

}

```

## Example for transforming custom blocks

```ts

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]

}

```

## License

MIT