vue2-script-setup-transform

Bring <script setup> to Vue 2.

npm i -D vue2-script-setup-transform
npm i @vue/composition-api

Install @vue/composition-api in your App's entry (it enables the setup() hook):

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

// vite.config.ts
import { defineConfig } from 'vite'
import { createVuePlugin as Vue2 } from 'vite-plugin-vue2'
import ScriptSetup from 'vue2-script-setup-transform/vite-plugin'

export default defineConfig({
  plugins: [
    Vue2(),
    ScriptSetup(),
  ],
})

npm i @nuxtjs/composition-api

// nuxt.config.js
export default {
  buildModules: [
    '@nuxtjs/composition-api/module',
    'vue2-script-setup-transform/nuxt',
  ],
}

// vue.config.js

module.exports = {
  configureWebpack: {
    plugins: [
      require('vue2-script-setup-transform/webpack-plugin').default(),
    ],
  },
}

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('vue2-script-setup-transform/webpack-plugin').default()
  ]
}

import { transform } from 'vue2-script-setup-transform'

const Vue2SFC = transform(`
<template>
  <!-- ... -->
</template>

<script setup>
  // ...
</script>
`)

We recommend using VS Code with Volar to get the best experience (You might want to disable Vetur if you have it).

When using Volar, you will need to install @vue/runtime-dom as devDependencies to make it work on Vue 2.

npm i -D @vue/runtime-dom

Learn more

If the global types are missing for your IDE, update your tsconfig.json with:

{
  "compilerOptions": {
    "types": [
      "vue2-script-setup-transform/types"
    ]
  }
}

If you are using ESLint, you might get @typescript-eslint/no-unused-vars warning with <script setup>. You can disable it and add noUnusedLocals: true in your tsconfig.json, Volar will infer the real missing locals correctly for you.

If you enjoy using <script setup>, you might also want to try vue-global-api to improve the DX even further.

• [x] PoC
• [x] Components registration
• [x] Compile time macros defineProps defineEmits withDefaults
• [x] Global types
• [x] Merge with normal scripts
• [x] Vite plugin
• [x] Webpack plugin
• [x] Nuxt module
• [ ] Top-level await (not supported)

MIT License © 2021 Anthony Fu