We Keep Coding

How to build page not found in vue 3

I'm doing a project with vue 3 and I have a problem with generate a pageNOTfound. So, I'm going to show my code cause I can't see the problem.
Route.js:
import { createRouter, createWebHistory } from "vue-router";
import Home from "#/views/Home.vue";
import NotFound from "#/views/NotFound.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/:pathMatch(.*)*",
component: NotFound,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // <---
// estilos app
import "./styles/styles.scss";
createApp(App).use(router).mount("#app");
NotFound.vue
<template>
<h1>404: Lo sentimos, la página que buscas no existe</h1>
</template>
<script>
export default {
name: "NotFound",
};
</script>
<style scoped lang="scss"></style>
App.vue
<template>
<div id="app">
<app-header />
<div class="app-container">
<Home />
</div>
<Footer />
</div>
</template>
<script>
import AppHeader from "#/components/AppHeader.vue";
import Home from "#/views/Home.vue";
import Footer from "#/components/Footer.vue";
export default {
name: "App",
components: {
AppHeader,
Home,
Footer,
},
};
</script>
I can't see where is my problem cause pageNOTfound is not working at this time. I tried a lot of changes but I don't know how can it works.

If you want to have 404 as a completely seperate page, without footer and header, then you need these files:
App.vue
<template>
<router-view></router-view>
</template>
<script>
export default {
name: "App",
};
</script>
Home.vue
<template>
<div>
<app-header />
<div class="app-container">
... other home content here ...
</div>
<Footer />
</div>
</template>
<script>
import AppHeader from "#/components/AppHeader.vue";
import Footer from "#/components/Footer.vue";
export default {
name: "Home",
components: {
AppHeader,
Footer,
},
};
</script>
This way the App.vue does not contain header or footer, but the Home.vue. And the 404 page will be displayed without header and footer.

Display layout based on boolean from Vuex

I got Vue2 app with vue-router with routings configured like that:
export default {
path: "/",
redirect: "/dashboard",
component: AdminLayout,
meta: {
requiresAuth: true
},
children: [
{
path: "/dashboard",
name: "Dashboard",
component: Dashboard
},
{
path: "/add/user",
name: "InviteUser",
component: InviteUser
},
{
path: "/groups",
name: "Groups",
component: Groups
},
...
In app, we got two different types of users - admin and normal user. Some of those routings should be accessible for both, but the problem is that user should see different layout base on its type (permission) - AdminLayout for admins and UserLayout for normal users.
Is there any way to show app which template should user see based on boolean from vuex with keeping route path?
on /dashboard admin will see dashboard with AdminLayout
on /dashboard normal user will see dashboard with UserLayout
My main routing cofig:
import Vue from "vue";
import VueRouter from "vue-router";
import SessionRoutes from "./session.js";
import AdminRoutes from "./admin.js";
import defaultRoutes from "./default";
Vue.use(VueRouter);
const routes = [AdminRoutes, SessionRoutes, defaultRoutes];
const router = new VueRouter({
mode: "history",
routes
});
export default router;

you can set a condition in the layout part on the current page for example for when you use nuxt:
<script>
export default {
layout: (ctx) => (ctx.isAdmin ? 'adminLayout' : 'userLayout'),
}
</script>
but I opine you don't use Nuxt.js and I think below solution is suitable for your question:
Using the meta-object in our route
set dynamic component on app.vue page
code for about.vue page
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import LayoutA from '../layouts/LayoutA.vue'
import LayoutB from '../layouts/LayoutB.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: { layout: LayoutA }
},
{
path: '/about',
name: 'About',
component: About,
meta: { layout: LayoutB }
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router;
<!--app.vue page -->
<template>
<div id="app">
<component :is="this.$route.meta.layout || 'div'">
<router-view />
</component>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
<!--about page-->
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<script>
export default {
name: "About"
};
</script>

To get a different layout working for the dashboard and all child routes your layouts have to use the router view component. I use a wrapper component to handle this in one of my projects following this approach.
Excerpt from my router config:
…
{
component: MainFrame,
name: 'main',
path: '/',
redirect: 'dashboard',
children: [
{
alias: 'dashboard',
component: Dashboard,
name: 'dashboard',
path: '', // Default child route → be equivalent to /dashboard
},
{
path: "add/user",
name: "InviteUser",
component: InviteUser
},
{
path: "groups",
name: "Groups",
component: Groups
},
],
},
…
In your MainFrame component you can wrap your layout in a dynamic component. So you can switch your layout easely based on a Vuex getter:
MainFrame.vue
<template>
<component :is="layout">
<!-- you can use slots too if you like -->
</component>
</template>
<script>
import AdminLayout from './AdminLayout'
import UserLayout from './UserLayout'
export default {
computed: {
layout() {
return this.$store.getters['isAdminUser'] ? AdminLayout : UserLayout
}
}
}
</script>
And your layouts have to use <router-view />. It works as a wrapper for all nested routes and therefore you have only one place to handle the layout for the dashboard and child pages:
AdminLayout.vue
<template>
<div class="auth-view">
<header>…</header>
<aside>…</aside>
<main>
<transition name="fade" mode="out-in">
<router-view />
</transition>
</main>
<footer>…</footer>
</div>
</template>
UserLayout.vue
<template>
<div class="guest-view">
<router-view />
</div>
</template>
EDIT:
This approach can be used for deeper nesting too. Assuming your user route should have another child routes you can solve this on the router config using a <router-view /> within a render function:
…
// Let's split down user related routes
{
component: { render: (h) => h('router-view') },
name: 'usersView',
path: 'users',
redirect: 'ListUsers',
children: [
// Show users
{
path: '', // route: /users/
name: 'ListUsers',
component: ListUsers
},
// Show a single user
{
path: ':id', // route: /users/{userId}
name: 'ViewUser',
component: ViewUser
},
// Invite new users
{
path: 'add', // route: /users/add
name: 'InviteUser',
component: InviteUser
},
]
}
…

Routing between two components in Vue.js

Well, this is my App.vue:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Home/>
<AddService/>
</div>
</template>
<script>
import Home from './components/Home.vue'
import AddService from './components/AddService.vue'
import Vue from 'vue'
import VueRouter from 'vue-router'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/home',
name: 'home',
component: Home
},
{
path: '/addService',
name: 'addService',
component: AddService
}
]
});
Vue.use(router)
export default {
name: 'App',
components: {
Home
}
}
</script>
I'd like to route between the Home and AddService Component. My Home page has a link which is basically this: Add a new Service
And if I press on this link I should get redirected to the AddService Component. But at the moment it only adds the right url in the search bar but I don't get redirected

When using Vue router you are not supposed to make your own anchor tags with hrefs for navigation. To navigate you can use the router-link component.
If you want to programmatically navigate you can use the push method on the router.

Your App.vue should look like this
<template>
<div id="app">
<router-view />
</div>
</template>
Your index.js should look like this
import Vue from 'vue'
import App from '#/App.vue'
import VueRouter from 'vue-router'
import Home from '#/components/Home'
import AddService from '#/components/AddService'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/add-service',
name: 'Add Service',
component: AddService
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
new Vue({
el: '#app',
router,
render: h => h(App)
}).$mount('#app')
BUT best practise is to use an external router/index.js file to declare all your routes and import to the index.js(main app file) and use it when you declare new Vue instance.
After that you can have router-link in your code as
<router-link to="path">
or navigate programmaticaly with
this.$router.push({ name: AddService })
or
this.$router.push({ path: '/' })

imported component into views not showing / VUE js

TLDR: Ive nested a component into a views folder and it wont show, I believe I have imported it correctly and think I'm missing something / any help here would be great
im importing a component into a views file which is then to be displayed via the vue router - the issue is the component or view does not show -
Oddly this code works if I ask the router to display the component as a stand alone, but not when I nest the component into the views file:
File structure is:
VIEWS FILE importing the component to be nested inside of it:
src/views/Contact.vue <<<< i imagine I have an issue here but I cannot seem to figure this out
<template>
<div class="contact_container">
<Contact/>
</div>
</template>
<script>
import Contact from '#/components/Contact.vue'
export default {
name: 'Contact',
components: {
Contact
}
}
</script>
Component file
src/components/Contact.vue
<template>
<div>
<h1>Welcome to the contact page</h1>
</div>
</template>
<script>
export default {
name: 'Contact',
data(){
return{
}
}
}
</script>
Views Router File:
src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Contact from '../views/Contact.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
},
{
path: '/contact',
name: 'Contact',
component: Contact
}
]
const router = new VueRouter({
routes
})
export default router
and finally App.veu
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/contact">Contact</router-link>
</div>
<router-view/>
</div>
</template>
/// UPDATED ///
In the code below - what does the name property do? 
(the code below is defining a component) 
<template>
    <div>
        <h1>Welcome to the contact page</h1>
    </div>
</template>
<script>
export default {
    name: 'Contact-Component', <<<< what does this do? 
    data(){
        return{
        }
    }
}
</script>
The reason why i'm a little lost here is because when we use this component we import it into another file using the below: 
import Contact from '../views/Contact.vue'
In that process we have defined the component as Contact (so it is not referenced by its name any more) .... so why did we define a name?
If there is any documentation on this that would be amazing and while it seems like a silly question (and probably is) it is distracting me with curiosity...
Thanks for any help -
Wally

change your code with this
<template>
<div class="contact_container">
<Contact/>
</div>
</template>
<script>
import Contact from './components/Contact.vue'
export default {
name: 'Contact',
components: {
"Contact":contact
}
}
</script>

The name is used to allow the component to recursively invoke itself in its template. It also helps when debugging as it allows for a more helpful error message.
Have a read over this to get a better idea: https://v2.vuejs.org/v2/api/#name

You have to let the app know it's a Vue component:
<script lang="js">
import Vue from 'vue';
export default Vue.extend({
name: 'Contact',
...
});

VueJS named routes not working

I try to work with named routes in a Vue app.
Exactly the same setup works totally fine in an other Vue project.
If I click on a named router-link, the just disappears.
If I check the element in the browser, there is an empty comment at the place, where the section should be.
The console isn't showing any errors.
Has anyone seen something similar?
Thank's for every help!
Code:
index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '#/components/views/home';
import AskQuestion from '#/components/views/ask-question';
import AddQuestion from '#/components/views/add-question';
import CompleteQuestions from '#/components/views/complete-questions';
import Survey from '#/components/views/survey';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/ask-question',
name: 'AskQuestion',
component: AskQuestion
},
{
path: '/add-question',
name: 'AddQuestion',
component: AddQuestion
},
{
path: '/complete-questions/:surveyId',
name: 'CompleteQuestions',
component: CompleteQuestions
},
{
path: '/survey/:surveyId',
name: 'Survey',
component: Survey
}
]
});
HTML
<router-link :to="{name: 'survey', params: {surveyId: survey.id}}">
<p class="viewQuestions">View questions</p>
</router-link>
App.vue
<template>
<div id="app">
<navigation></navigation>
<router-view/>
</div>
</template>
<script>
import Navigation from '#/components/generel/navigation';
export default {
name: 'app',
components: {
Navigation
}
};
</script>
<style src="./assets/scss/_general.scss" lang="scss"></style>

in route config , set history mode and then go to your link and click that LINK , and then go check URL address bar
export default new VueRouter({
mode:'history',
......
});
for example if you click on this
<router-link :to="{ name: 'home' }"> Home </router-link>
and your rute is
{
path:'/home',
component:Home,
name:'home'
}
if your route workin well , you must see this url in browser address bar
https://localhost/home