Nuxt/Vuetify - v-autocomplete not displaying the v-menu - vue.js

Question

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.

Answer 1

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.

Answer 2

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.