We Keep Coding

Using vue-router in a Vuejs 2 application throws '"export 'createRouter' was not found in 'vue-router'' error message

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).

I cannot have similar router paths in Vue3

I'm just learning Vue3 and trying to do some routing, but I'm getting an error message that makes no sense.
Maybe it's related to some kind of nested routing, but I also tried to do children and it didn't want to work.
This works:
import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../home/HomePage.vue';
import FetchAccount from '../nonPrimaryADAccounts/FetchAccount.vue';
import CreateADAccount from '../nonPrimaryADAccounts/CreateADAccount.vue';
export default createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'Home',
component: HomePage,
},
{
path: '/FetchAccount',
name: 'FetchAccount',
component: FetchAccount,
},
{
path: '/CreateADAccount',
name: 'CreateADAccount',
component: CreateADAccount,
},
],
});
And this does not:
import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../home/HomePage.vue';
import FetchAccount from '../nonPrimaryADAccounts/FetchAccount.vue';
import CreateADAccount from '../nonPrimaryADAccounts/CreateADAccount.vue';
export default createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'Home',
component: HomePage,
},
{
path: '/NonPrimaryADAccount/FetchAccount',
name: 'FetchAccount',
component: FetchAccount,
},
{
path: '/NonPrimaryADAccount/CreateADAccount',
name: 'CreateADAccount',
component: CreateADAccount,
},
],
});
Error message:
4:29 error Unable to resolve path to module '../nonPrimaryADAccounts/CreateADAccount.vue' import/no-unresolved

If you need nested path the recommended approach is to use a function to generate the routes with the prefix:
const withPrefix = (prefix, routes) =>
routes.map( (route) => {
route.path = prefix + route.path;
return route;
});
export default createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'Home',
component: HomePage,
},
...withPrefix('/NonPrimaryADAccount',[
{
path: '/FetchData',
name: 'FetchData',
component: FetchData,
},
{
path: '/CreateADAccount',
name: 'CreateADAccount',
component: CreateADAccount,
},
]),
]

Vue js Routers how to open a page when following a specific link

I am studying Vue JS and I have problems with routers, I want certain content to open when writing on the page address for example "Home", and more precisely, I have a component called HomePage, I want to open this component when writing in url " Home "for example "http://localhost:8080/Home" and by default, if nothing is specified in the address, then an empty page would open
App.vue
<template>
<HomePage></HomePage>
</template>
<script>
import HomePage from "#/View/HomePage/HomePage";
export default {
name: 'App',
components: {
HomePage
}
}
</script>
Edit
App.vue
<template>
<HomePage>
<router-view />
</HomePage>
</template>
<script>
import HomePage from "#/View/HomePage/HomePage";
export default {
name: 'App',
components: {
HomePage,
}
}
</script>
Index.js
import Vue from 'vue'
import Router from 'vue-router'
import HomeRoute from '#/components/routes/HomeRoute'
import Rar from "./src/View/Rar";
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/home',
name: 'HomeRoute',
alias: '*',
component: HomeRoute
},
{
path: '/Rar',
name: 'Rar',
component: Rar
}
]
})
export default router

You should specify a path inside your routes.
Steps
Your main app.vue should look like this
<div>
<navbar />
<router-view />
<footer />
</div>
</template>
make a folder router and inside an index.js (or more structured files)
It must look like this
import Vue from 'vue'
import Router from 'vue-router'
import HomeRoute from '#/components/routes/HomeRoute'
import AboutRoute from '#/components/routes/AboutRoute'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/home',
name: 'HomeRoute',
alias: '*',
component: HomeRoute
},
{
path: '/about',
name: 'About',
component: AboutRoute
}
]
})
export default router
The first path is the '/home' with alias *.
if you type '/home' in the url you will go to the main page.
Also the alias: '*' means that everything you type after will redirect you to this route, unless it finds another route registered

You are missing some code from main.js.
I cannot see Vue getting initalized anywhere.
You should import router in your main.js and use .use(router) in there
App.vue
<template>
<router-view />
</template>
/router/index.js
import Router from 'vue-router'
import HomeRoute from '#/components/routes/HomeRoute.vue'
const router = new Router({
routes: [
{
path: '/home',
component: HomeRoute
}
]
})
export default router
main.js
import Vue from 'vue'
import App from "./App.vue";
import router from '#/router'
const app = Vue.createApp(App)
app.use(router)
app.mount('#app')

You can check your HomePage component. Does it has slot that you put router-view there? What if you use simple router-view without HomePage? Did you register router in your main app.js?
And if I correctly understand you, you can do something like this to manage your routes in index.js
const router = new Router({
routes: [
{
path: '/',
beforeEnter: (from, to, next) => next({path: '/home'})
},
{
path: '/home',
name: 'HomeRoute',
component: HomeRoute
}
]
})
Read about VueRouter hooks https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
Also you can use children:
import HomeLayout from '#/layouts/HomeLayout.vue'
import HomePage from '#/views/HomePage.vue'
import HomeAbout from '#/views/HomePage.vue'
const router = new Router({
routes: [
{
path: '/',
beforeEnter: (from, to, next) => next({path: '/home'})
},
{
path: '/home',
component: HomeLayout,
children: [
// full url will be like: localhost:8080/home
{
path: '',
name: 'Home',
component: HomePage
},
// full url will be like: localhost:8080/home/about
{
path: 'about',
name: 'HomeAbout',
component: HomeAbout
}
]
}
]
})

Nothing renders in vue.js project

After creating a new Vue project with Vue CLI 3 and deleting all default views and components, I created two new views. None of them appears when changing url and instead I see blank page and no errors in console. In Chrome DevTools inspector I see that <div id="app"></div> is empty. Vue.js Devtools plugin doesn't trigger Vue on the page at all. I think I might miss something in my settings but can't find what can cause such behaviour.
This my main.js:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
This is my App.vue:
<template>
<div id="app">
<router-view />
</div>
</template>
This is index.js of router
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Auth from '../views/Auth.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/auth',
name: 'auth',
component: Auth,
},
];
const router = new VueRouter({
mode: 'history',
scrollBehavior() {
return { x: 0, y: 0 };
},
base: process.env.BASE_URL,
routes,
});
export default router;
This is vue.config.js
module.exports = {
configureWebpack: {
devtool: 'source-map',
},
chainWebpack: config => {
config.module
.rule('js')
.use('babel-loader')
.loader('vue-loader')
.tap(options => {
return options;
});
},
css: {
loaderOptions: {
sass: {
data: `
#import "#/assets/styles/variables.scss";
#import "#/assets/styles/global.scss";
`,
},
},
},
};
Home.vue:
<template>
<h1>Home page</h1>
</template>
<script>
export default {
name: 'home',
};
</script>

If you are using vue-cli you shouldn't have vue.config.js populated - as a fresh start -, hence there is a good chance your config is faulty.

Vue not displaying component on particular route

Basically I want to render the Login component on my Login Route but it is not rendering-
Login component-
<template>
<v-app>
<h1>Login Component</h1>
</v-app>
</template>
<script>
export default {
}
</script>
Routes.js-
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '#/components/Home'
import Register from '#/components/Register'
import Login from '#/components/Login'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/register',
name: 'register',
component: Register
},
{
path: '/login',
name: 'login',
component: Login
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
this is my main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
el:'#app',
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
I am using vue version-2.6.10 and vue router version-3.1.2..it is also not showing any error please help.

Make sure that you wrap up the router-view></router-view> in <v-content></v-content> then only your routing will work properly. Otherwise only URL will change and the respective component will not render.