How to open link in new tab in vue with router-link? and i'm trying like this it is going to new page but links are not disappearing.
<template>
<div>
<router-link to="/">Go to Home</router-link>
<router-link to="/about" target="_blank">Go to About</router-link>
</div>
<router-view></router-view>
</template>
Related
I'm working on a simple dashboard. trying to make a sidebar static and just the main section dynamic.
Successfully made the sidebar static but the elements on the new page route of the nuxt link appear under the sidebar instead of the main page section.
PS. I'm using bulma as my CSS framework.
Here's the side bar code.
<template>
<div class="ml-6 mt-6">
<div class="columns is-gapless">
<div class="column is-one-fifth">
<aside class="menu">
<ul class="menu-list">
<li class="py-4">
<NuxtLink to="/dashboard">
Dashboard
</NuxtLink>
</li>
<li class="py-4">
<NuxtLink to="/clients">
Clients
</NuxtLink>
</li>
<li class="py-4">
<NuxtLink to="/projects">
Projects
</NuxtLink>
</li>
<li class="py-4">
<NuxtLink to="/invoice">
Invoice
</NuxtLink>
</li>
<li class="py-4">
<a>Proposal</a>
</li>
</ul>
</aside>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'SideBar'
}
</script>
And here's the code for one of the pages I'm trying to route to.
<template>
<div>
<h1>
Testing Clients
</h1>
</div>
</template>
<script>
export default {
name: 'ClientS',
layout: 'sidebar'
}
</script>
enter image description here
what do I do to make the contents on the pages show up in the main section area instead of under the sidebar?
Include a <Nuxt /> component in the sidebar layout. It indicates where the page's content is loaded. Learn more on it from the docs.
You need to create a layout file named sidebar in the layouts directory. In this file, you can put your sidebar component and <Nuxt/> component as your page content.
This is the simple example:
/layouts/sidebar.vue
<div>
<Sidebar />
<div>
<Nuxt />
</div>
</div>
In the simplest case, you need three files in nuxt project.
layout file
in /layout/... directory.
the defualt.vue not require to add to project and used by default.
is where the pages run.
page file
in /pages/... directory.
any .vue files in this directory use default.vue layout by default.
component of sidebar or any layout file
in /components/... directory
use can create any .vue file in this directory and use it in layout or page file with syntax
example of layout file with bluma:
(create PanelNavbar and PanelSidebar component With your own taste.)
<template>
<div>
<div class="header has-background-white is-flex is-justify-content-flex-end" >
<PanelNavbar />
</div>
<section class="main-content is-flex is-justify-content-center">
<PanelSidebar />
<div class="column px-0 pt-0">
<div class="navbar header has-background-dark is-flex is-justify-content-flex-end">
</div>
<nuxt />
</div>
</section>
</div>
</template>
Passing a header component as a named slot into router-view. But router-view not exactly displaying it. Normally this was work in vue 2. But it's not with vue 3. Is the way doing it changed or is it impossible to do it now?
header component
<template>
<header id="g-header">
<figure>
<img id="logo"
src="#/assets/images/logo.jpg"
alt="The beautiful MDN logo.">
</figure>
<nav id="g-nav" class="flex justify-space-between">
<a v-for="(link, idx) in links" :key="idx"
class="flex justify-center align-center capitalize"
:href="link.val">{{ link.text }}</a>
</nav>
</header>
</template>
router-view component
<template>
<div id="moduleA" class="modules">
<router-view class="moduleA-children">
<template #header>
<app-header></app-header>
</template>
</router-view>
</div>
</template>
children view component
<template>
<div id="step1">
<slot name="header"></slot>
<div class="row">the named slot OR default slot not showing</div>
</div>
</template>
Is there a way to accomplish this? Or do I missing something here?
In Vue Router 4, <router-view> exposes the component to render as a v-slot prop, named Component, which would be used with the built-in <component> tag. You could pass any slots to the component within that <component> tag:
<router-view v-slot="{ Component }">
<component :is="Component">
<template #header>
<app-header></app-header>
</template>
</component>
</router-view>
demo
I'm using a vuetify application, App.vue looks like this
<template>
<v-app class="grey lighten-4">
<nav>
<Header/>
</nav>
<section><NavigationBar/></section>
<v-content>
<router-view></router-view>
</v-content>
<Footer/>
</v-app>
</template>
This works perfectly. But I faced the situation, when I need to create an empty page, so I don't want load footer, header or bar. Is there any way to create a route for an empty page in this case?
Nested Routes
https://router.vuejs.org/guide/essentials/nested-routes.html
<template>
<v-app class="grey lighten-4">
<router-view>
<nav>
<Header/>
</nav>
<section><NavigationBar/></section>
<v-content>
<router-view></router-view>
</v-content>
<Footer/>
<router-view>
</v-app>
</template>
I have installed vue cli, when i try to show my navbar(component) it shows but when i try to show my footer(component)it shows.
When i show other cms pages the navbar and footer are together the text is not displaying between...
Find the image, Output:
This is my navbar where it is a component under component folder
<template>
<div>
<ul class="navbar-nav">
<li class="nav-item">
<router-link to="/" class="nav-link">Home</router-link>
</li>
<li class="nav-item">
<router-link to="/contacts" class="nav-link">Contacts Us</router-link>
</li>
<li class="nav-item">
<router-link to="/login" class="nav-link">Login</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Navbar'
}
</script>
This is my HomePage where it is a component under component folder
<template>
<div>
test
</div>
</template>
<script>
export default {
name: 'HomePage'
}
</script>
This is App.vue Where it is inside the Src/ Folder
<template>
<div id="app">
<app-header></app-header>
<app-footer></app-footer>
<router-view></router-view>
</div>
</template>
<script>
import Navbar from '#/components/Navbar'
import Footer from '#/components/Footer'
export default {
name: 'App',
components: {
'app-header': Navbar,
'app-footer' : Footer
}
}
</script>
This the Footer Component
<template>
<div class="hello">
<footer class="text-muted">
<div class="container">
<p class="float-right">
Back to top
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? Visit the homepage or read our getting started guide.</p>
</div>
</footer>
</div>
</template>
<script>
export default {
name: 'Footer',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
In your App.vue template you have the order of the elements wrong.
Move the <app-footer> below rhe <router-view>:
<template>
<div id="app">
<app-header></app-header>
<router-view></router-view>
<app-footer></app-footer>
</div>
</template
I have a vue component Jumbotron.vue:
<template lang="html">
<div class="jumbotron" style="border-radius:0px; color:#fff;">
<div class="container">
</div>
</div>
</template>
And other page component Main.vue:
<template>
<div class="root">
<navbar></navbar>
<jumbotron>
<h1 class="display-4">I want to add here, to the jumbotron's div container some h1 and paragraph</h1>
<p class="lead ">Like this paragraph</p>
</jumbotron>
<words></words>
</div>
</template>
But i cant add content to the jumbotron, because its wrong. I dont want to add content(p and h1) inside of the Jumbotron.vue, because i want to use Jumbotron.vue more than 1 time with different content inside it. Is this possible?
This is done with slots.
<template lang="html">
<div class="jumbotron" style="border-radius:0px; color:#fff;">
<div class="container">
<slot></slot>
</div>
</div>
</template>
Everything you put inside the jumbotron component in the parent will be rendered in the slot.