Vue3 script setup without all the imports from vue

Question

I find it very repetitive to have to import vue things like: import { ref, computed } from 'vue' In the script setup section.

Would it be a bad practice to, let's say assign vue to a special character, like $ and then use it to access these like let drawer = $.ref(null);

If so what would be the reasoning behind?

If you are using typescript, it will be a problem because it lacks typing — Duannx
– Duannx, Commented Dec 5, 2022 at 2:54

wittgenstein · Accepted Answer · 2022-12-04 19:39:54Z

1

You can use the experimental version of vue3:

// vite.config.js
export default {
  plugins: [
    vue({
      reactivityTransform: true
    })
  ]
}

after that there is an auto import available and you don't have to write .value if using a $ref or $computed.

Because $ref() is a macro and not a runtime API, it doesn't need to be imported from vue.

answered Dec 4, 2022 at 19:39

wittgenstein

4,60011 gold badges35 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Király István Over a year ago

Thanks. This is a solution, and I will take a look. However, I'm more curious about the reasoning. ....

Király István Over a year ago

After looking deeper into the experimental version, I can say that it's focused on accessing variables with .value. The import becomes unnecessary as it is implemented with a macro.

Branislav Popadič Over a year ago

Just a little update: Reactivity Transform was an experimental feature, and has been removed in the latest 3.4 release. More info here.

jmroon · Accepted Answer · 2023-04-13 02:10:38Z

1

You can use unplugin-auto-import: https://github.com/antfu/unplugin-auto-import

Example using vite.config.js:

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
    plugins: [AutoImport({imports: ['vue']})]
})

answered Apr 13, 2023 at 2:10

jmroon

212 bronze badges

Collectives™ on Stack Overflow

Vue3 script setup without all the imports from vue

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related