When I run npm run serve I get the This dependency was not found error, relating to the router that I'm trying to use in the main.js. I don't understand why this happens - the router is created and exported from src/router/router/js file and imported in the main.js file.
main.js:
import App from './App.vue'
import './assets/tailwind.css'
import Vue from 'vue'
import VueRouter from 'vue-router'
import router from 'router/router.js'
Vue.config.productionTip = false
Vue.use(VueRouter);
const app = new Vue({
render: h => h(App),
}).$mount('#app')
app.use(router);
router.js:
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
This is my directory structure:
I get this error:
This dependency was not found:
* router/router.js in ./src/main.js
You have not imported the router correctly, it should be like this instead:
import router from './router/router.js'
Normally it should work now.
Edit:
Try making a new vue project with the router preset.
I change import to
import router from `./router/router.js
And also made new project with Vue 3 (was used Vue 2 for this one), where I installed vue-router#next. Then I followed this tutorial: https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/
Changed main.js:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router.js'
createApp(App).use(router).mount('#app')
Related
I am trying to set up a vue-router for an application in Vue 2/rails.
I installed vue-router through yarn =>
yarn add vue-router#2
That's my router =>
import { createWebHistory, createRouter } from "vue-router"
import PageHome from '../components/PageHome.vue'
import TermsAndConditions from '../components/TermsAndConditions.vue'
const routes = [
{
path: "/",
name: "PageHome",
component: PageHome,
},
{
path: "/terms-conditions",
name: "TermsAndConditions",
component: TermsAndConditions
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
and that's my application file
import Vue from 'vue/dist/vue.esm'
import router from '../router/index'
Vue.use(router)
import PageHome from '../components/PageHome.vue'
import TermsAndConditions from '../components/TermsAndConditions.vue'
const images = require.context('../images', true)
require('../stylesheets/application.scss')
document.addEventListener('DOMContentLoaded', () => {
if(document.getElementById('v-app')) {
new Vue({
el: '#v-app',
store,
components: {
PageHome,
TermsAndConditions
}
})
}
})
I have added those lines in a file where I want to see the links.
<router-link to="/">Home</router-link>
<router-link to="/TermsAndConditions">Terms and conditions</router-link>
<router-view/>
That's what is in my package.json =>
"vue": "^2.6.12",
"vue-loader": "^15.9.6",
"vue-router": "2",
"vue-template-compiler": "^2.6.12",
"vue-turbolinks": "^2.2.2",
Unfortunately I get this error message and I don't really know what to do with it.
Failed to compile.
./app/javascript/router/index.js 13:15-27
"export 'createRouter' was not found in 'vue-router'
Any help is very welcome !!
Can't find documentation for VueRouter2, but in VueRouter3 you have to do it like this:
import VueRouter from 'vue-router';
...
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/foo', component: Foo }
]
})
The code you send as a question is for VueRouter4 that's used with Vue3
For Vue 2 projects you have to call Router.
import Router from 'vue-router';
const router = new Router({
...
})
export default router
createRouter is for Vue 3 projects(Vue Router v4).
There is the second warning: warning in ./src/main.js "export
'default' (imported as 'Vue') was not found in 'vue'.
It's showing me blank site, something could be wrong with router and
here is script of my App.vue (not sure about this):
import router from '#/router'
export default{ }
And here is my index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next)=>{
next();
})
export default router
And main.js:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
router,
render: h => h(App)
}).$mount('#app')
I got same problem.this way can solve that.
import {createRouter, createWebHistory} from "vue-router";
const router = createRouter({
history: createWebHistory(),
routes
})
I'm new in vue,i found it in sample of vue-router.
https://codesandbox.io/s/nested-views-vue-router-4-examples-hl326?initialpath=/users/eduardo&file=/src/router.js
If using Vue router 4, do this:
...
const router = VueRouter.createRouter({
...
Trying to implement vue router. Getting the error:
Cannot read property 'forEach' of undefined
at createRouterMatcher
Vue Version: #vue/cli 4.5.9. I have two views/pages already formatted and ready to implement. My home page will be basically be the index.vue. Ive tried playing around with index.js and main.js but can't seem to get it to work.
src/main.js
import { createApp } from 'vue'
import { routes } from './router/index'
import { createRouter, createWebHistory } from 'vue-router'
require('dotenv').config();
import App from './App.vue'
import './index.css'
let app = createApp(App)
let router = createRouter({
history: createWebHistory(),
routes,
})
app.use(router)
app.mount('#app')
src/router/index.js
import Index from '../views/index.vue'
import About from '../views/about.vue'
const routes = [
{
path: "/",
name: "Index",
component: Index
},
{
path:"/about",
name: "About",
component: About
}
]
export default routes;
src>App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
Both my views index.vue & about.vue both have export default { name: 'pagename'} accordingly
You're using a default export, which means routes is not a named export and shouldn't use brackets. This will fix the problem:
import routes from './router/index' // no brackets
But I recommend doing all of the router setup in the router file and exporting the router instead of the routes:
router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Index from '../views/index.vue'
import About from '../views/about.vue'
const routes = [
{
path: "/",
name: "Index",
component: Index
},
{
path:"/about",
name: "About",
component: About
}
]
let router = createRouter({
history: createWebHistory(),
routes,
})
export default router;
main.js
import { createApp } from 'vue'
import router from './router/index'
require('dotenv').config();
import App from './App.vue'
import './index.css'
let app = createApp(App)
app.use(router)
app.mount('#app')
Why wont my component load?
The root url
http://localhost:8080/
must just show Bar?
Thanks for the help
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './components/Home'
import Contact from '././components/Contact'
Vue.config.productionTip = false
Vue.use(VueRouter);
const Bar = { template: '<div>bar</div>' }
const routers = [
{ path: '/', component: Bar },
];
let router = new VueRouter({mode: 'history', routes: routers});
new Vue({
router
}).$mount('#app')
Possible reasons are
You didn't import router properly in your code
You don't Vue.use(VueRouter), just pass it to your new Vue object parameters
Correct it like so
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'router'
import Home from './components/Home'
import Contact from '././components/Contact'
Vue.config.productionTip = false
const Bar = { template: '<div>bar</div>' }
const routers = [
{ path: '/', component: Bar },
];
let router = new VueRouter({mode: 'history', routes: routers});
new Vue({
router
}).$mount('#app')
it should work if your App.vue (imported on line 2) has <router-view /> component in its template and all other imports are valid.
In bootstrap.js, I have this:
window.Vue = require('vue');
window.events = new Vue();
Now I would like to use vue-router as well purely to have access to this.$route. What is the easiest way to do this? I tried to follow the official documentation, but it's so much different than what comes with laravel:
const app = new Vue({
router
}).$mount('#app')
Thank you!
First install vue-router.
Then create a new file router.js in resources/assets/js and put this code in it.
import Router from 'vue-router'
Vue.use(Router)
/*
Make sure your pages components are inside `resources/assets/js/pages` folder
*/
const Home = require('./pages/Home.vue')
const Hello = require('./pages/Hello.vue')
const NotFound = require('./pages/NotFound.vue')
let router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
}, {
path: '/hello',
name: 'hello',
component: Hello
}, {
path: '*',
component: NotFound
}, ]
})
export default router
Now go to app.js file and insert this code:
import Vue from 'vue'
import router from './router.js'
const app = new Vue({
el: '#app',
router, // Add this to your Vue instance
//...
})
Then create your pages (Home.vue, Hello.vue and NotFound.vue in this case).
in app.js
import VueRouter from 'vue-router';
window.Vue = require('vue');
window.Vue.use(VueRouter);
import router from './config/routes';
const app = new Vue({
el: '#app',
router,
});
you could extract the code for routes definition into ./config/routes.js, see below example:
import VueRouter from 'vue-router';
const routes = [
{path: '/', redirect: '/app/articles'},
...
];
const router = new VueRouter({routes});
export default router;
Here are steps to make laravel routes and vue routes work together:
1. define your vue layout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="app"></div>
<script src="/js/app.js"></script>
</body>
</html>
2. define your laravel route to make vue-router handle url
Route::any('{all}', function(){
// welcome view should extend layout defined in step #1
return view('welcome');
})->where('all', '.*');
3. setup vue with vue-router
routes.js
import DashboardPage from './components/dashboard/dashboard.vue'
import SignupPage from './components/auth/signup.vue'
import SigninPage from './components/auth/signin.vue'
export const routes = [
{ path: '/signup', component: SignupPage },
{ path: '/signin', component: SigninPage },
{ path: '/dashboard', component: DashboardPage },
{ path: '*', redirec: '/' }
];
router.js
import VueRouter from 'vue-router';
import { routes } from './routes';
export const router = new VueRouter({
routes,
mode: 'history'
});
export default router
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import { router } from './router'
Vue.use(VueRouter);
new Vue({
router: router,
render: h => h(App)
}).$mount('#app')