Error: Cannot find module '@vue/cli-service/generator/template/src/App.vue' with vite

Question

I created a vue 3 project with vite and I wanted to add vue-router to the project, so from the terminal I wrote vue add router but after downloading everything I get the following error:

Error: Cannot find module '@vue/cli-service/generator/template/src/App.vue' from '/home/frostri/projects/onedrive_local/client/node_modules/@vue/cli-plugin-router/generator/template/src'
    at Function.resolveSync [as sync] (/usr/lib/node_modules/@vue/cli/node_modules/resolve/lib/sync.js:102:15)
    at renderFile (/usr/lib/node_modules/@vue/cli/lib/GeneratorAPI.js:515:17)
    at /usr/lib/node_modules/@vue/cli/lib/GeneratorAPI.js:300:27
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Generator.resolveFiles (/usr/lib/node_modules/@vue/cli/lib/Generator.js:268:7)
    at async Generator.generate (/usr/lib/node_modules/@vue/cli/lib/Generator.js:175:5)
    at async runGenerator (/usr/lib/node_modules/@vue/cli/lib/invoke.js:111:3)
    at async invoke (/usr/lib/node_modules/@vue/cli/lib/invoke.js:92:3)

Is there anything I can do to fix it?

tony19 · Accepted Answer · 2021-05-22 22:24:03Z

20

The vue command is from Vue CLI. Vue CLI commands (i.e., vue add router) are not intended for Vite projects despite the similarities in project structure. There currently isn't an official Vite CLI command to automatically augment your project files to setup vue-router, so you'll have to do it manually:

Run this command from the project root to install vue-router (version 4x for Vue 3):
```
npm i -S vue-router@4
# or:
yarn add vue-router@4
```

Create src/router.js with the following contents:

import { createRouter, createWebHistory } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: HelloWorld,
    }
  ]
})

Edit src/main.js to install the router instance:

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router' 👈

createApp(App)
  .use(router) 👈
  .mount('#app')

Edit src/App.vue to contain:

<template>
  <router-view />
</template>

answered May 22, 2021 at 22:24

tony19

140k23 gold badges281 silver badges354 bronze badges

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

1 Comment

quest Over a year ago

This saved me a lot of time. Thank you so much, this should be in their official docs!

Fabio Duarte · Accepted Answer · 2021-07-29 23:18:05Z

18

I don't know if this helps, but at least works for me.

first I installed @vue/cli-service

npm install --save-dev @vue/cli-service

and then Vue Router.

vue add router

Let me know if this works for you! Have a nice day!

answered Jul 29, 2021 at 23:18

Fabio Duarte

5416 silver badges10 bronze badges

1 Comment

Fee Over a year ago

This worked for me! I had installed vue cli globally: npm i -g @vue/cli, but not in the project I think. (Also I was trying to add typescript, not router, but I ended up here)

Naga - MS · Accepted Answer · 2022-02-03 00:00:22Z

2

I have followed the above steps and it worked for me

sudo npm install --save-dev @vue/cli-service

npm fix audit

then add router using the command

vue add router

answered Feb 3, 2022 at 0:00

Naga - MS

313 bronze badges

Collectives™ on Stack Overflow

Error: Cannot find module '@vue/cli-service/generator/template/src/App.vue' with vite

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related