`Vue3 - Vite` project alias src to @ not working

Question

I have installed the project with vue3 - vite importing a component like

import Component from '../../../../components/Component.vue'

i just want to alias the src folder and do

import Component from '@/components/Component.vue'

this is my vite.config.js

import vue from '@vitejs/plugin-vue'

/**
 * https://vitejs.dev/config/
 * @type {import('vite').UserConfig}
 */
export default {
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    // ...
                }
            }
        })
    ]
}

am i missing something? what else should i do?

have you tried addiing `jsconfig.json`? I didnt know `jsconfig` will work with Vue Vite or not but usually I use this with Vue 2 — kusiaga, Feb 04 '21 at 10:29
I solved this issue adding this in paths array inside my `tsconfig.json` file: `"@/*": ["./src/*"]` — Jose Alvarez, Mar 27 '23 at 11:52

Roland · Answer 1 · 2023-02-20T11:49:04.917

Update 2023

Here is what worked for me (finally):

ViteConfig:

import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) },
      { find: '@assets', replacement: fileURLToPath(new URL('./src/shared/assets', import.meta.url)) },
      { find: '@cmp', replacement: fileURLToPath(new URL('./src/shared/cmp', import.meta.url)) },
      { find: '@stores', replacement: fileURLToPath(new URL('./src/shared/stores', import.meta.url)) },
      { find: '@use', replacement: fileURLToPath(new URL('./src/shared/use', import.meta.url)) },
    ],
  },
});

TSConfig:

{
  ...
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./src/*"],
      "@assets/*": ["./src/shared/assets/*"],
      "@cmp/*": ["./src/shared/cmp/*"],
      "@stores/*": ["./src/shared/stores/*"],
      "@use/*": ["./src/shared/use/*"]
    }
  }
}

Update 2022

This solution comes by default from when creating a new project with npm init vue@latest

import { fileURLToPath, URL } from "url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

In components use @/:

<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
</script>

This is what worked for me:

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@/': `${path.resolve(__dirname, 'src')}/`
    }
  }
})

Then in components:

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

I get a warning when starting the dev server: Unrestricted file system access to "C:/Projects/my-vite-project/src/main.ts" For security concerns, accessing files outside of serving allow list will be restricted by default in the future version of Vite. Refer to https://vitejs.dev/config/#server-fs-allow for more details. — Thomas, Jul 26 '21 at 10:27
Heads up: I needed to add a slash before the @ for it to work, because otherwise ["that's considered a package"](https://github.com/vitejs/vite/issues/279#issuecomment-636110354). So like this: `import HelloWorld from '/@/components/HelloWorld.vue'` — tillsanders, Jul 17 '22 at 22:37
This worked for me and I got to remove `vite-tsconfig-paths`! Thank you. I think you still need to keeping mapping in tsconfig.json for editor intellisense. — Ben Stickley, Jul 26 '22 at 19:24
I have a problem doing this. When I change the template of the imported component with alias path it doesn't hot reload on save nor on hard reload. I have to restart the vite server to see the change — Julien Reszka, Sep 29 '22 at 14:00
God bless you and blessed be the fruit of thy mother's womb. — Mina, Jun 23 '23 at 06:52

score 116 · Answer 2 · edited Dec 18 '21 at 12:52

116

In the vite.config.js file write the below code blocks

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  }
})

edited Dec 18 '21 at 12:52

Penny Liu

15,447
5
79
98

answered Mar 07 '21 at 10:43

Md. Helal Uddin

1,943
1
14
18

14

If using vite v2.5.0 or higher `'@': path.resolve(__dirname, './src'),` . Add `.` before `/src` – Adarsh Madrecha Aug 20 '21 at 21:49

Mises · Answer 3 · 2023-02-16T16:42:21.343

32

Vue 3 Vite TypeScript

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  }
})

To remove warnings and add hint to download with @/

tsconfig.json

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

edited Feb 16 '23 at 16:42

answered Dec 06 '21 at 20:11

Mises

4,251
2
19
32

3

nice. thanks you. I alway has warnings by TS because I set the path to `"@/*": ["./src"]`. haha – Lin Weiye Aug 29 '22 at 08:05

score 10 · Answer 4 · edited Mar 29 '21 at 01:55

10

Unlike webpack, Vite doesn't have @ aliased to src by default. There is discussion of this at the following issue: https://github.com/vitejs/vite/issues/279

Ultimately you need to create an alias:

// vite.config.js 
module.exports = {
  alias: {
    '/@': path.resolve(__dirname, './src')
  }
}

// Your config 
export default {
  alias: {
    '/@': path.resolve(__dirname, './src')
  },
  plugins: [ ... ]
 }

Then you need to use /@ in your files, e.g.:

import foo from '/@foo'

edited Mar 29 '21 at 01:55

David Parker

128
2
13

answered Feb 04 '21 at 13:03

match

10,388
3
23
41

I like your answer, but I don't know how to insert it into mine `vite.config.js` – Oleksii Zelenko Feb 04 '21 at 13:57
Have updated the answer to hopefully give the answer for your config file. – match Feb 04 '21 at 14:38
failed to load config from C:\Users\user\PhpstormProjects\prazdnik\vite.config.js Error while running task C:\Users\user\PhpstormProjects\prazdnik:dev with message 'spawn vite ENOENT' error when starting dev server:... – Oleksii Zelenko Feb 04 '21 at 15:23

score 8 · Answer 5 · edited Mar 12 '22 at 18:03

I tried most of the above solutions and unfortunately did not work. The following did.

In my jsconfig.json

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

and in my vite.config.js

import { fileURLToPath } from "url";
import path from "path";

import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "src"),
    },
  },
});

score 1 · Answer 6 · answered Jan 30 '22 at 08:57

In my Vite 2.7.x

import vue from '@vitejs/plugin-vue'
import path from 'path'
 
...    
...
 resolve: {
   alias: [
      { find: '@', replacement: path.resolve(__dirname, './src') },
      { find: '...', replacement: path.resolve(__dirname, '...') },
      { find: '...', replacement: path.resolve(__dirname, '...') },
      { find: '...', replacement: path.resolve(__dirname, '...') },
   ]
}

score 1 · Answer 7 · answered Aug 05 '22 at 13:38

In my blog post i describe how to configure this with Vite, TypeScript and Jest: https://divotion.com/blog/how-to-configure-import-aliases-in-vite-typescript-and-jest. For Vite change the vite.config.ts file to:

// vite.config.ts
import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

score 1 · Answer 8 · answered Oct 08 '22 at 12:37

As of Oct 2022

I encountered similar problems to yours, although I'm working on my React Project using Vite this still works on the Vue project too.

This is my vite.config.ts:

import { defineConfig } from 'vite';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            '/@src-pages': path.resolve(__dirname, './src/pages'),
            '/@src-assets': path.resolve(__dirname, './src/assets')
        }
    },
    plugins: [vue()]
});

Don't forget to add "/" before your alias name.

I found this solution from Vite Github Issue: https://github.com/vitejs/vite/issues/279#issuecomment-635646269

score 0 · Answer 9 · answered May 23 '22 at 13:10

Export path resolve function

Problrem

@/ alias doesn't work in :src dynamic attribure, so that you can't resolve asset file path dynamically.

Solution

In the common ts code, define path resolve function(i.e. img()) using import.meta.url.
Use img() in the vue script.

Files

/src
  /assets/img/
    logo.png
  Util.ts
  App.vue

Util.ts

export const srcRoot = import.meta.url;
export function img(name:string){
  return new URL(`./assets/img/${name}.png`, srcRoot)
}

App.vue

<script>
import {img} from "./Util";
</script>

<template>
<img  :src="img('logo')" />
</template>

score -1 · Answer 10 · answered Jul 03 '22 at 20:35

This seems to work for me and is shorter:

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path'

export default defineConfig({
    resolve: {
        alias: {
            '@': path.resolve('./resources'),
        }
    },
    plugins: [
        laravel({
            input: 'resources/js/app.js',
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Shorter, don't mean better. Without `__dirname` after compiling and punting to some run environment, bet it won't work. — Mises, Sep 27 '22 at 04:55

score -1 · Answer 11 · answered Feb 09 '23 at 11:56

Try the below code in 'vite.config.ts' or 'vite.config.js' file

import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    },
  },
  plugins: [vue()],
})