In Vite, you can create custom import aliases. This makes creating absolute import paths much easier.

// vite.config.ts
export default defineConfig({  
  plugins: [
    vue(),
  ],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: fileURLToPath(new URL('./src', import.meta.url))
      },
    ]
  }
})

// tsconfig.ts
{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "./src/*"
      ],
    }
  }
}

// Thanks to the absolute path import aliases,
// the import statement looks the same for every component.
import Button from '@/components/Button.vue'
import Dropdown from '@/components/Dropdown.vue'

// By using relative imports, the import statements can vary between files
import Button from './Button.vue'
import Button from './../Button.vue'
import Dropdown from './components/Dropdown.vue'