CODEWITHSUNDEEP
javascriptvue.jsvue-router
Errol Paleracio
Errol Paleracio

Reputation: 634

Vue router doesn't cannot find modules when it is place inside a folder

I have vue router that works when I place it directly in src folder but doesn't work when i place it inside a folder inside src directory.

Here's my code which word perfectly when I place the vue-router file side the src folder.

import Vue from 'vue';
import Router from 'vue-router';

import HelloWorld from './components/HelloWorld.Vue';

Vue.use(Router);

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Login',
            component: HelloWorld            
        }
    ]
});

My main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router/index.js';
//import router from './router.js';

import './assets/app.scss';
import jQuery from 'jquery';
window.$ = jQuery;
window.jQuery = jQuery;

import 'popper.js';
import 'bootstrap';


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

Here's my folder structure.

Folder structure

Here's the error.

./src/router/index.js
Module not found: Error: Can't resolve './components/HelloWorld.Vue' in 'C:\xampp\htdocs\sales-and-inventory\frontend\src\router'

Upvotes: 0

Views: 6917

Answers (1)

Hiws
Hiws

Reputation: 10324

That's because ./ looks in the folder where the file is located. So the path it's currently trying to find is C:/path/to/project/src/router/components/HelloWorld.Vue

Instead, change the path to ../components/HelloWorld.Vue and it should work.

Upvotes: 1

Related Questions