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.config.ts
import VueSetupExtend from "unplugin-vue-setup-extend/vite";

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

Example: examples/vite

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

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

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

This module works for both Nuxt 2 and Nuxt Vite

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

This module works for both Nuxt 3

// 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">
  // placeholder
</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">
// The script tag setting here is invalid
</script>

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

Why do we need placeholder

If you do not write anything in the script, @vue/compiler does not parse script Setup so the name you set will not take effect.