So I tried to implement this example for a v-badge from vuetify and it is simply not showing in the DOM:
<v-badge bordered color="error" icon="mdi-lock" overlap>
<v-btn class="white--text" color="error" depressed>
Lock Account
</v-btn>
</v-badge>
Then I compared the source code of the working example on the vuetify website with the compiled source code of my example:
Working example on vuetify website:
Not working example in my vue instance:
Notice the absence of the v-badge__wrapper span. Instead of that there is only an empty comment: <!---->
Any idea why? And how to fix this?
Might be vuetify version issue, please upgrade your vuetify version. I solved it also by just upgrading it.
Related
I am trying to use vue-masonry-wall in my NuxtJS (v2.15.7) app to give it a masonry layout. According to the docs, the vue-masonry-wall package is "SSR friendly". It states to simply add :ssr="{columns: 2}" to masonry so that during SSR, it will be loaded in 2 columns.
I tried this in my code (codesandbox here). But, during SSR, nothing is loaded.
Anyone got any idea on what is happening and why I can't see any of the items? It works fine in client-mode.
Code example:
<vue-masonry-wall :items="items" :options="{width: 300, padding: 12}" :ssr="{columns: 2}" #append="append">
<template v-slot:default="{item}">
<div class="item">
<h5>{{item.title}}</h5>
<p>{{item.content}}</p>
</div>
</template>
</vue-masonry-wall>
One option is to run it just on the client side, so:
1- if loaded as plugin, globally: name the plugin file ending with ".client", for instance: 'vue-masonry-wall.client.js'
2- if used as module, you can wrap it with the tag.
I dont understand why v-container do not apply fluid option. It always behaves as usual container. Here is code from my App.vue
<template>
<v-app id="main" :style="{background: $vuetify.theme.themes[theme].background}">
<v-container fluid="true">
</v-container>
</v-app>
</template>
I have tried many ways like :fluid="true, or only fluid but it still acts as usual container. After inspecting page I have noticed that it seems like browser is interpretating container class before container--fluid and overlaying it's max width. as on screenshot below. Is there any way to solve this issue? I'm using firefox for inspecting.
For anyone encountering simmilar issue in future:
For learning project I've installed both boostrap-vue and vuetify. When I removed bootstrap vue dependencies container started to act as expected.
I'm really lost on this one. This is my code:
<template>
<v-container>
<v-row>
<v-col cols='12'>
<v-text-field
label="This is a label"
single-line
solo
></v-text-field>
</v-col>
</v-row>
</v-container>
</template>
If I enter text into the field on desktop it's fine. Even viewing the browser through Chrome DevTools and using the PC keyboard works. But direct entry using the phone's keyboard does not. The text just gets overlayed on the label.
What's more interesting is that it focuses properly if you type a space or punctuation and then the letters.
And yes, that's all the code I have in the file haven't even added in export defaults yet
Using nuxt v2.12.2 and #nuxtjs/vuetify v1.11.2
EDIT: I've opened a GitHub issue here. If it doesn't get answered here you can always check the issue.
In my case the problem is due to vuetify version - v2.2.22 is the last one that is working properly. For now try downgrading your packages as per instructions in here (try experimenting with different package versions): https://forum.vuejs.org/t/how-to-update-vuetify-to-latest-version-in-nuxt-js/66326
I want to get image from assets folder in vue and
Im using vue bootstrap
Here is my code :
<b-card title="Title" img-src='#assets/profile.jpg' img-alt="Image" img-top>
<b-card-text>
This is a wider card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.
</b-card-text>
<template v-slot:footer>
<small class="text-muted">Last updated 3 mins ago</small>
</template>
</b-card>
Here is my hirarcy
But it not working. Can someone help me?
To use relative paths for the various img (img-src in this case) props in bootstrap-vue components, you need configure vue-loader as explained in the documentation here.
This should fix the issue you're facing.
If you cannot set the transformAssetUrls for vue-loader, you can require as an alternative.
<b-card :img-src="require('../static/picture.jpg')"></b-card>
I have a Vue.js project (Nuxt.js) and as UI I use the Vuetify.
For e2e testing I use the Cypress.
Below is my scenarios of test in Cypress:
I have a problem while creating test for page where I use v-autocomplete component.
The problem is that I can't use Vuetify native classes to get the element I want to test.
below is an example with data-cy selector
<v-autocomplete
v-model="model"
:items="items"
item-text="Description"
item-value="API"
label="Public APIs"
placeholder="Start typing to Search"
data-cy="autocomplete"
></v-autocomplete>
I type some text into search input.
Then in v-autocomplete have been found search results.
And example of one of there is below:
...
<div>
<a class="v-list__tile v-list__tile--link theme--light">
<div class="v-list__tile__content">
<div class="v-list__tile__title">Result item
<span class="v-list__tile__mask">result item</span>
</div>
</div>
</a>
</div>
...
Then I want select one of search items by clicking to one of found results.
And for that I should to use native classes of Vuetify, but it is not have stability (.v-list__tile--link class сan be renamed by developers).
How I can add data-cy selector into result search html item?
Maybe who know any another way to resolve this problem?
I don't think v-list__tile--link can be changed by developers, it seems to be added at runtime DOM by the Vuetify library (unless you mean Vuetify developers, then sure it can change between versions).
In any case, if you want to be more content-oriented in your selectors, use Cypress .parent() selector
For example,
cy.contains('div', 'itemTextToSelect').parent('a').click()
If posssible make sure 'itemTextToSelect' is really distinctive (if you can set it in the test fixture).
BTW, before the user starts typing the autocomplete list is display: none, so you will need to either .type('something') into the input, or .click({force: true}) the item.