Something

something.md

Auto Importing Components

Auto imports make refactoring much easier. If you change the name or location of a component—say, from Foo/HelloWorld to Bar/GoodByeWorld—auto imports save you from manually updating every import line across your codebase.

With auto import:

-<HelloWorld>
+<GoodByeWorld>

Without auto import:

-<HelloWorld>
+<GoodByeWorld>

-import HelloWorld from 'Foo/HelloWorld'
+import GoodByeWorld from 'Bar/GoodByeWorld'

When a component uses several other components, auto importing avoids cluttering the top of your file with a long list of imports:

<template>
  <div>
    <ComponentOne />
    <ComponentTwo />
    <ComponentThree />
    <ComponentFour />
    <ComponentFive />
    <ComponentSix />
    <ComponentSeven />
    <ComponentEight />
    <ComponentNine />
    <ComponentTen />
  </div>
</template>

<script setup>
import ComponentOne from './components/ComponentOne.vue'
import ComponentTwo from './components/ComponentTwo.vue'
import ComponentThree from './components/ComponentThree.vue'
import ComponentFour from './components/ComponentFour.vue'
import ComponentFive from './components/ComponentFive.vue'
import ComponentSix from './components/ComponentSix.vue'
import ComponentSeven from './components/ComponentSeven.vue'
import ComponentEight from './components/ComponentEight.vue'
import ComponentNine from './components/ComponentNine.vue'
import ComponentTen from './components/ComponentTen.vue'
</script>

Auto Importing Composables

The same goes for composables. It’s super convenient to just use what you need:

const foo = useFoo()

Instead of:

import useFoo from 'composables/useFoo'

const foo = useFoo()

If you change the name or location, the same refactor benefit applies.

Auto Importing Vue Methods

This one’s a no-brainer. It doesn’t make much sense to manually import ref, computed, etc. every time. We all know where they come from.

I prefer writing:

const name = ref('')

Over:

import { ref } from 'vue'

const name = ref('')

At the end of the day, it’s a matter of preference. But auto imports aren’t some hidden magic—they’re declared in the config for anyone to see.