I am using vuetify version 2.3.10. I have a file with layout somewhat like this
<template>
<v-app>
<div>
<Users />
</div>
</v-app>
</template>
<script>
import Users from 'views/users.vue';
export default {
components: {
Users
},
</script>
But "Hello" doesn't show on the browser. But if I remove the tag something like this.
<template>
<div>
<Users />
</div>
</template>
Then in the browser I am getting this error. Cannot read property 'mobileBreakpoint' of undefined. Please help me resolve this issue.
users.vue(component)
<template>
<div>
<p>Hello</p>
</div>
</template>
index.js
The issue was here. I forgot to add vuetify : new Vuetify(), and the issue is resolved.
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
new Vue({
vuetify : new Vuetify(),
...
});
In your Users component there should be an export default statement as well (without it you can't import it later) and give it the name: 'Users' for good measure as well. Then it should work as intended. Better also store your components in components. views are meant for everything that has an own route.
Users.vue
<template>
<div><p>Hello</p></div>
</template>
<script>
export default {
name: 'Users',
}
</script>
Other.vue
<template>
<v-app>
<div>
<Users />
</div>
</v-app>
</template>
<script>
import Users from '#/components/users.vue';
export default {
components: {
Users
},
</script>
I am in a process of migration of vuetify version 1.5 to 2.3 like you
in my case,
contains minus z-index
check your style sheet
Related
I am using Vue2 and Vuetify in a project. I would like to be able to use any icon from the Tabler icon library, like so:
<v-icon>custom-icon-name</v-icon
I do not want to use the custom component based system with:
<v-icon>$vuetify.icons.iconName</v-icons>
Conceptually, what would be some possible solutions? Will I need to create a module for this, and if so, what would be a good approach? Thank you for your time.
The option that technically is working for me—but will be tedious to do—is to implement a TablerIcon.vue component:
<template>
<div>
<template v-if="iconName=='Deg360ViewIcon'">
<Deg360ViewIcon :size="size" :stroke-width="strokewidth" />
</template>
<template v-else>
<QuestionMarkIcon :size="size" :stroke-width="strokewidth" />
</template>
</div>
</template>
<style>
</style>
<script>
export default {
name: 'TablerIcon',
props: ['iconName','size','strokewidth'],
data() {
return {
}
},
}
</script>
And then I call this with:
import TablerIcon from './TablerIcon.vue'
...
components: {TablerIcon},
<TablerIcon :iconName="'Deg360ViewIcon'" :size="24" :strokewidth="1.5"/>
This seems to be working with the npm package found here: https://www.npmjs.com/package/vue-tabler-icons
Is there any way to hide the main div in a Vue app that is builded by Vue-CLI? I have tried appending display property but it didn't resolve the issue. I am trying to hide it inside the Channels component of mine. My main component looks like this :
<template>
<div id="app">
<Channels/>
</div>
</template>
<script>
import Channels from './components/Channels'
export default {
name: 'App',
components: {
Channels
}
}
</script>
You can use <template> tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
<p>
Am I wrapped around Div or Template?
</p>
</template>
</div>
<script>
new Vue({
el: "#app"
})
</script>
You can inspect the parent of p tag in developer tools. It is div instead of template
you mean <div id="app">?, you can delete it directly, but you should maintain that three is only one root in <template>
right now, I'm writing a single-page-application in vue.js using vue-router. Pages like the homepage, sign-in page etc. all share a navigation and footer component. On a few pages however, I need the entire screen so that the navigation and footer shall not be displayed.
Hence, I decided to nest components and include the navigation and footer component when necessary. My problems now is, that the navigation and footer template disappeared on all pages.
Edit: A more complete demo can be found in this Github repository.
Here's a simplified version of the files I'm using:
index.html:
<div id="app">
<router-view></routerview>
</div>
router.js:
import Homepage from './homepage.vue';
import SignIn from './signin.vue';
const router = new VueRouter({
routes: [
{path: '/', component: Homepage},
{path: '/signin', component: SignIn},
]
})
homepage.vue and signin.vue components:
<template>
<navigation></navigation>
// some page-specific content
<footer-vue></footer-vue>
</template>
<script>
import Navigation from './navigation.vue';
import Footer from './footer.vue';
export default {
components: {
'navigation': Navigation,
'footer-vue': Footer,
},
}
</script>
A component without navigation and footer:
<template>
// some page-specific content
</template>
Is it even possible to nest components this way? I hope someone is able to point me into the right direction.
Both homepage.vue and signin.vue have invalid templates. e.g.
<template>
<navigation></navigation>
<h1>The homepage</h1>
<footer-vue></footer-vue>
</template>
This is not allowed as it has 3 root nodes. See https://v2.vuejs.org/v2/guide/components.html#A-Single-Root-Element
You need to wrap it to get it to work:
<template>
<div>
<navigation></navigation>
<h1>The homepage</h1>
<footer-vue></footer-vue>
</div>
</template>
Note that this limitation does not apply to functional components and is also expected to be lifted for all components in Vue 3.
Much more worrying is that you're not seeing any errors messages for this. You really need to look into that as it suggests there's something very much amiss with your development setup.
An example of the error message you should be seeing:
new Vue({
el: '#app',
template: '<div></div><div></div>'
})
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<div id="app">
</div>
I am trying to build a layout using single-file components in Vue.js, with dynamic population and URLs using Vue-router. (I'm using the webpack template via vue-cli as well.)
It works as expected for my app.vue file-- containing the nav, sidebar, page head, and <router-view>-- and the <router-view> content appeared as expected when the correct <router-link> is clicked... until I tried to add subcomponents to the add-load component being called to the <router-view>. Now, nothing appears at all, despite not throwing any errors.
Admittedly, I am not basing my structure on any examples, as I couldn't really find any doing it the way I was hoping to. I wanted to use nested components by calling them like custom elements-- I think this makes the code much easier to read and maintain. I'm not entirely sure how to structure it otherwise, to be honest. Using multiple <router-view>s as siblings to each other seems counterintuitive to me.
I've tried a variety of combinations of how and where to import and call the components, and nothing has worked. The only way I can get any content to load is if I only call a single component for path: '/add-load'. Is it just impossible to use multiple components outside of your base app.vue? I find that hard to believe. Here's what I started with.
From my index.js:
import AddLoad from '#/components/AddLoad'
import AddLoad from '#/components/ProgressSteps'
import Stops from '#/components/Stops'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
components: {
Sidebar,
TopNav,
MobNav,
PageHead
}
},
{
path: '/add-load',
components: {
AddLoad,
ProgressSteps}
}
]
})
From my App.vue file (the multiple component behavior that I'd like to mimic is shown here):
<template>
<div id="app">
<div class="wrapper">
<Sidebar/>
<div class="container-fluid">
<TopNav/>
<MobNav/>
<div class="container-fluid">
<PageHead/>
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
<script>
import Sidebar from '#/components/Sidebar'
import TopNav from '#/components/TopNav'
import MobNav from '#/components/MobNav'
import PageHead from '#/components/PageHead'
export default {
name: 'App',
components: {
Sidebar,
TopNav,
MobNav,
PageHead
}
}
</script>
From my AddLoad.vue file:
<template>
<div class="add-load">
<div class="content-container container-slim">
<progress-steps/>
<router-link to="#stops">Stops</router-link>
<router-view></router-view>
</div>
</div>
</template>
<script>
import ProgressSteps from '#/components/ProgressSteps'
export default {
name: 'AddLoad',
component: ProgressSteps
}
</script>
Here is a link to a codesandbox, so you can see the full functionality. https://codesandbox.io/s/7k520xk0yq
I have actually 2 global components one for Admin and other one for Modal. The Admin component have a child comp called Page and the Page comp have others childs. I want to pass content directly to Page comp via slots. Like this:
app.js
new Vue({
el: '#app',
components: { Admin, Modal }
})
Admin.vue
<template>
<div>
<page>
<slot></slot>
</page>
</div>
</template>
export default {
components: { Page }
}
Page.vue
<template>
<div>
<page-header>
<slot name="page-header">
<h1 class="page-title">
<slot name="page-title">
Page Title
</slot>
</h1>
</slot>
</page-header>
<page-body>
<slot>
Page Body
</slot>
</page-body>
<page-footer>
<slot name="page-footer">
Page Footer
</slot>
</page-footer>
</div>
</template>
export default {
components: {
pageHeader,
pageBody,
pageFooter
}
}
index.html
<admin>
<div slot="page-header">
Header Test
</div>
Body Test
<div slot="page-footer">
Footer Test
</div>
</admin>
I don't need to use Page as global component, Please any idea?? Hope you understand what I'm looking for...
Thanks
I don't think slots are designed to do this. If you need data to be persisted between parent and children then use either props as #Belmin Bedak suggested. When you pass a prop to a component it will be available to all its children.
If you need to persist state on front-end I strongly recommend using Vuex as source of data for all components ( only use if it becomes more complex to have data scattered across components ).