unplugin-vue-setup-extend

vue setup extend options name
6,273 6
vue vite unplugin transform webpack rollup name extend
Install
npm install unplugin-vue-setup-extend
Latest Version:0.3.5
License:MIT
Last Updated:Apr 6, 2025
Links: GitHub  ·  npm
Maintainer: yifengyoujian

unplugin-vue-setup-extend

Thanks to vite-plugin-vue-setup-extend.

Explain

Name support for setup syntax sugar

The project is based on vite-plugin-vue-setup-extend and unplugin implementations.

The project applies to vue3 and vue2+composition-api

Install

npm i unplugin-vue-setup-extend --save-dev
or
yarn add unplugin-vue-setup-extend --dev
Vite
// vite.config.ts
import VueSetupExtend from "unplugin-vue-setup-extend/vite";

export default defineConfig({
  plugins: [
    VueSetupExtend({
      /* options */
    }),
  ],
});

Example: examples/vite


Rollup
// rollup.config.js
import VueSetupExtend from "unplugin-vue-setup-extend/rollup";
export default {
  plugins: [
    VueSetupExtend({
      /* options */
    }),
  ],
};


Webpack
// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require("unplugin-vue-setup-extend/webpack")({
      /* options */
    }),
  ],
};


Nuxt
// nuxt.config.js
export default {
  buildModules: [
    [
      "unplugin-vue-setup-extend/nuxt",
      {
        /* options */
      },
    ],
  ],
};

This module works for both Nuxt 2 and Nuxt Vite


Nuxt3
// nuxt.config.js
import VueSetupExtend from "unplugin-vue-setup-extend/vite"
export default {
   vite: {
        plugins: [VueSetupExtend({})],
  }
};

This module works for both Nuxt 3


Vue CLI
// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require("unplugin-vue-setup-extend/webpack")({
        /* options */
      }),
    ],
  },
};

Example: examples/vue-cli

Template

The most basic demonstration

<template> </template>
<script setup lang="ts" name="App"></script>

Some special cases

If you have two scripts in your project, we will not convert them; please set the name property yourself in a normal script

<template> </template>
<script setup lang="ts" name="App">
  // This "name" here will not take effect.
</script>

<script lang="ts">
  export default {
    name: "App",
  };
</script>

Related Packages

unplugin-image

A universal bundler plugin which imports JPG, PNG, GIF, SVG, and WebP files.

40,041 1
rollup transform unplugin vite webpack
unplugin-config

Register global imports on demand for Vite and Webpack

33,928 28
rollup transform unplugin vite webpack
@code-hud/hud-javascript-bundlers-plugins

Based on starter template for unplugin.

33,515
rollup transform unplugin vite webpack
@phosphor-icons/unplugin

[!WARNING] > This plugin is extremely experimental, and is subject to change. Us...

8,436 5
rollup transform unplugin vite webpack
unplugin-vue2
15,032 12
rollup transform unplugin vite webpack nuxt

Version History

Version Released License
0.3.5 MIT
0.3.4 MIT
0.3.3 MIT
0.3.2 MIT
0.3.1 MIT