Below is the template of my App.vue.
It employs Vuetify's <v-main> and <v-app-bar> UI architecture.
Now I'm wondering how to achieve inter-component communication between the component that lives inside <v-main> and the component that lives inside <v-app-bar>.
<template>
<v-app>
<v-app-bar app color="primary" dark>
<ReadingSelector
:selectedReading="selectedReading"/>
</v-app-bar>
<v-main>
<router-view></router-view>
</v-main>
</v-app>
</template>
My routes contain a single component:
const routes = [
{ path: '/', component: Controller }
]
What is the most elegant and simple way to proceed architecturally?
Is Vuex the answer or is there a better way?
Edit2: I found out the answer to this, you might also miss this one out if you're just starting on vuetify, or that you just directly dive into it and integrate it into an existing project without reading its documentation like me 😎. Vuetify won't work if it's not inside the application tag or <v-app> tag. So make sure if you're using a layout, that you wrap your code inside the v-app tag, the stylings may apply, but the functionalities won't work if you did not wrap using the application tag.
Original Question:
I can't seem to be able to make the the v-autocomplete work in any of my project, I tried it in 2 different projects, one installed using npm, and the other installed using the nuxt-create. I even copied the code from their demo on their website, but that didn't work too. These are the package version for each project:
"dependencies": {
"#nuxtjs/axios": "^5.13.6",
"core-js": "^3.15.1",
"nuxt": "^2.15.7",
"vuetify": "^2.5.5"
},
and
"devDependencies": {
"#nuxtjs/vuetify": "^1.12.1",
"#vue/test-utils": "^1.0.0-beta.27",
"babel-jest": "^24.1.0",
"jest": "^24.1.0",
"nodemon": "^1.18.9",
"vue-jest": "^4.0.0-0"
}
I can see the v-menu and the list in my array when I inspect element but it has a default style of display: none;, and because of that, even if I clicked or start typing, the array of supposed autocompletes wouldn't show.
So my question would be, how do I make it to work like how it's supposed to work in the demo on their website?
Edit1: I found out a little quirk about this, It would now work, but only on pages with default layout. So when I set a custom layout, like this one, layout: 'sidebar-layout', on the /device page, the v-autocomplete's dropdown would never open, unless I set the div class v-menu using element inspector in my browser. I haven't yet found out what's causing this, could either be in the layout or the component called into it.
You maybe forgot to add the script part?
The following code as in the example in the docs, totally works on my side
<template>
<v-card>
<v-container fluid>
<v-row
align="center"
>
<v-col cols="12">
<v-autocomplete
v-model="values"
:items="items"
outlined
dense
chips
small-chips
label="Outlined"
multiple
></v-autocomplete>
</v-col>
<v-col cols="12">
<v-autocomplete
v-model="values"
:items="items"
dense
chips
small-chips
label="Solo"
multiple
solo
></v-autocomplete>
</v-col>
<v-col cols="12">
<v-autocomplete
v-model="value"
:items="items"
dense
filled
label="Filled"
></v-autocomplete>
</v-col>
</v-row>
</v-container>
</v-card>
</template>
<script>
export default {
data: () => ({
items: ['foo', 'bar', 'fizz', 'buzz'],
values: ['foo', 'bar'],
value: null,
}),
}
</script>
Here is a working github link if you need a confirmation.
yarn && yarn dev and everything should work fine.
I don't know if this is silly or not, but the fix for this was to make sure that your code inside your layout.vue file is wrapped inside a <v-app> tag.
So this was the layout that was causing the issue:
<template>
<div class="main__container">
<div class="sidebar__container">
<Sidebar />
</div>
<div class="main__content">
<Nuxt />
</div>
</div>
</template>
After comparing to the vuetify's default layout, that one had all of it's code wrapped inside a <v-app> tag, (which I clearly missed, since I just started using vuetify and immediately used it on an existing project). So after wrapping my layout with <v-app> it now worked:
<template>
<v-app>
<div class="main__container">
<div class="sidebar__container">
<Sidebar />
</div>
<div class="main__content">
<Nuxt />
</div>
</div>
</v-app>
</template>
Thanks for the answers.
I'm a newbie to Vue JS. I'm creating a sample Vue application as a part of studying. I use Vue CLI version and Vuetify. I installed Vuetify by following Vue documentation. I'm creating a template with the Vuetiy. Some Vuetify properties are not working. I've already spent a few hours on the problem but I still cannot find a solution. Here is my code.
<template>
<v-row>
<v-col
cols="6"
offset="3"
>
<v-card
dark
>
<v-card-title
class="justify-center"
>
Hello World!
</v-card-title>
</v-card>
</v-col>
</v-row>
</template>
The result
Expected result
Is it possible to create parent (wrapper) components in Vue? I've looked and I haven't been able to find anything
What I have in mind is the following (the v-something components are from the vuetify library):
//cardWrapper.js
<template>
<v-card>
<v-row>
<v-col>
</v-col>
</v-row>
</v-card>
<template>
<script>
export default {
blabla
}
</script>
then this should somehow be available so that I can in the main file
// index.vue
<template>
<cardWrapper>
<v-btn>Click Me!</v-btn>
</cardWrapper>
</template>
I'm guessing this is a straightforward process and that I simply haven't been googling it correctly.
The only thing I've been able to find was to use dynamic components, but I would rather not pass components as properties
Here's the answer:
custom component
//custom-parent.vue
<template>
<custom-parent>
<slot/>
</custom-parent>
</template>
main file
//index.vue
<template>
<custom-parent>
<a>Hellohello</a>
</custom-parent>
</template>
I am using nuxt and vuetify. all of the tags working fine. But when I am using <v-icon>, the icon is not showing ..
<v-flex xs12 mb-3>
<v-btn outline fab small color="blue-grey lighten-4">
<v-icon color="grey darken-4">mdi-facebook</v-icon>
</v-btn>
<v-btn outline fab small color="blue-grey lighten-4">
<v-icon color="grey darken-4">mdi-google-plus</v-icon>
</v-btn>
<v-btn outline fab small color="blue-grey lighten-4">
<v-icon color="grey darken-4">mdi-linkedin</v-icon>
</v-btn>
</v-flex>
Here is what worked for me:
Start by adding the following to the vuetify: {} object in nuxt.config.js:
defaultAssets: {
font: true,
icons: 'md'
},
icons: {
iconfont: 'md',
}
Then refer to your icons without the 'mdi-' prefix as follows:
<v-icon>feedback</v-icon>
Please note that I only have 2 hours of Nuxt.js experience so there is likely a better way, but I hope this helps people get started :)
Edit: I figured out that there are two different icon libraries that Vuetify can come with (depending on which instructions you follow for installation). One is md which you use without prefixing your icons and the other is mdi which you use with the "mdi-" prefix.
The unofficial google's repository definitely works, can't testify for others. Try the CDN link first
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
Alternatively, install locally using yarn or NPM
$ yarn add material-design-icons-iconfont -D
// OR
$ npm install material-design-icons-iconfont -D
Then import in your vuetify.js file
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
export default new Vuetify({
icons: {
iconfont: 'md',
},
})
Thats all