unplugin-vue-setup-extend
TypeScript icon, indicating that this package has built-in type declarations

0.3.4 • Public • Published

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">
  // 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.

Package Sidebar

Install

npm i unplugin-vue-setup-extend

Weekly Downloads

1

Version

0.3.4

License

MIT

Unpacked Size

15.7 kB

Total Files

25

Last publish

Collaborators

  • yifengyoujian