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>
Related
I am trying to add header division to my vue.js template. but i could not add html tags into the header file. please check my files
App.vue
<template>
<div class="app">
<!-- Sidebar -->
<Header>
</Header>
<Sidebar />
<!-- Content -->
<router-view />
</div>
</template>
<script setup>
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'
</script>
Header.vue
<div class="page-header">
<ul>
<li>Home</li>
<li>About us</li>
</ul>
</div>
above unorder list consider as a invalid elements. but div tag is valid. Please check the below error during compile
can you help me to solve this problem
maybe miss <template> tag in Header.vue
Please I'm still new using VueJs and am working on a new project and I'm having issues adding images and text in Element UI Carousel for Vue, please how do I add images and text in the Carousel?
<el-carousel :interval="4000" type="card" height="400px">
<el-carousel-item v-for="item in 6" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
data(){
return{
}
}
}
</script>
Here is the link to CodeSandbox
https://codesandbox.io/s/staging-sky-o82gq?file=/src/App.vue
You put content in the slides, by repeating the <el-carousel-item> and putting text/images inside it.
You can simply put content in like this:
<el-carousel :interval="4000" type="card" height="300px">
<el-carousel-item>
<div class="item">
<div class="item__content">
Text for slide 1
</div>
<img class="item__image" src="https://picsum.photos/300?random=1" alt="" />
</div>
</el-carousel-item>
<el-carousel-item>
<div class="item">
<div class="item__content">
Another text for slide 2
</div>
<img class="item__image" src="https://picsum.photos/300?random=2" alt="" />
</div>
</el-carousel-item>
<el-carousel-item>
<div class="item">
<div class="item__content">
Yet another for third image
</div>
<img class="item__image" src="https://picsum.photos/300?random=3" alt="" />
</div>
</el-carousel-item>
</el-carousel>
I have created an example where i add different images and some text to the carousel:
https://codesandbox.io/s/charming-hill-osoxh?file=/src/components/Carousel.vue
Does this answer your question?
I made a view to show some contact information for the user:
<template>
<div v-for="user in users" class="user">
<div class="userInformation">
<img :src="user.photo" />
<div class="userName">
<h3>{{ user.age }}</h3>
<p>{{ user.gender }}</p>
</div>
</div>
<div class="button-wrapper">
<a href="#">
<button #click="$router.push(`/user/${user.id}`)">User Profile</button>
</a>
</div>
</div>
</template>
<style>
</style>
users is an array that holds all users which I fetch from the backend.
I want to create a component so that I can re-use the user card in other classes and don´t have to include the markup. I tried it the following way but I'm stuck at the button to redirect the user and the img because I don´t know how to use named slots there.
<template>
<div class="user">
<div class="userInformation">
<img />
<div class="userName">
<h3>{{ age }}</h3>
<p>{{ gender }}</p>
</div>
</div>
<div class="button-wrapper">
<a href="#">
<button>User Profile</button>
</a>
</div>
</div>
</template>
<script>
export default {
name: "UserCard",
props: [
"age",
"gender"
]
};
</script>
Another problem is that I have to re-create the fetch method for my users in other classes to access the user information. Would there be a better way of doing this?
// fetch user data from backend and create users array
...
<div v-for="user in users" :key="user.name">
<UserCard
:age="`${user.age}`"
:gender="`${user.gender}`"
/>
</div>
Is this the right approach to create a reusable component?
You're headed in the right direction for your component. If you wanted a named slot for the button you could use something like this.
Child Component
<template>
...
<slot name="button">
<!-- default/fallback content can be provided, if the parent does
not provide slot content the button-wrapper div will appear -->
<div class="button-wrapper">
<a href="#">
<button>Default Button</button>
</a>
</div>
</slot>
</div>
</template>
Parent
<div v-for="user in users" :key="user.name">
<UserCard
:age="user.age"
:gender="user.gender">
<template v-slot:button>
<div>some custom button here {{ user.phone }}</div>
</template>
</UserCard>
</div>
Also compilation scope (Vuejs v2 guide) is an important thing to keep in mind with slots - "Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope."
In terms of fetching your users, that's a separate issue. Look into something like Vuex or other ways of managing shared state if you find yourself constantly having to fetch users in various components
I'm having some trouble with nuxt generate, the output file generated isn't closing tags correctly,
The earliest tag in the document that's not closing is an li tag. Here's an example of my component and how it appears in the generated output file,
Component:
<template>
<div class="sec-nav-container row">
<div class="container">
<ul class="sec-nav">
<li class="sec-nav-item">Manage Connections</li>
</ul>
</div>
</div>
</template>
dist
<div class="sec-nav-container row" data-v-55f11ed2>
<div class="container" data-v-55f11ed2>
<ul class="sec-nav" data-v-55f11ed2>
<li class="sec-nav-item" data-v-55f11ed2>Manage Connections</ul>
</div>
</div>
HTML produced by nuxt is minified. And since closing li is optional, it's stripped.
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.