I'm trying to make my image draggable in another application like google or another site would do. For example if I drop an image from google to a Word document, it will copy the link of it and some web applications would show the image instead; the behavior depends on the app.
But the problem is my v-img doesn't even print the link, it just does nothing.
Here is my code:
<v-card v-if="chunk.length >= i">
<template v-if="activeTab === 'Comments'">
<v-card-title class="justify-center">{{ chunk[i-1] }}</v-card-title>
</template>
<template v-else-if="activeTab === 'Images'">
<v-img
:src="getImgUrl(chunk[i-1])"
width="500"
contain
draggable="true"
/>
</template>
<v-card-actions>
<v-col>
<v-btn
color="#138ed3"
block
dark
>
Share
</v-btn>
</v-col>
<v-col>
<v-btn
color="#ffcd00"
block
dark
>
Save
</v-btn>
</v-col>
</v-card-actions>
</v-card>
As you can see I already tried the "draggable" option but it doesn't help.
Is there something I'm missing ?
The problem with v-img is that it renders the image as background (using the CSS style background-image) rather than as an IMG tag. Apparently, CSS backgrounds do not support dragging.
i have this component, its a simple component, but does not render, just i see words "Sales", i need to install another library?
<template>
<v-app>
<v-container>
<v-row dense align="stretch">
<v-col cols="4">
<v-card min-height="100%">
<v-card-text class="green--text">
<h5 class="text-truncate text-uppercase">Sales</h5>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</v-app>
</template>
<script>
export default {
name: 'Taps',
setup() {
},
}
</script>
my dependencies are:
"vue": "^3.2.20",
"vue-router": "^4.0.0-0",
"vue3-perfect-scrollbar": "^1.5.5",
"vuex": "^4.0.0-0",
Unfortunately Vuetify does not yet support Vue 3.
The current version of Vuetify does not support Vue 3. Support for Vue 3 will come with the release of Vuetify v3. When creating a new project, please ensure you selected Vue 2 from the Vue CLI prompts, or that you are installing to an existing Vue 2 project.
You'll need to downgrade your Vue version or choose a different component library. Quasar is a great alternative to Vuetify with lots of the same components and features.
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 using vuetify in my Nuxt project and it is working fine in Vue components. Here is the markdown:
---
title: Title
description: Description
---
# Heading
<v-row>
<v-col cols="12" md="6">
### Subheading
<img src="image.jpeg" alt="Image" width="100"/>
<p>
Text 1
</p>
<v-btn icon href="https://twitter.com/jack">
<v-icon color="#1ca0f1">mdi-twitter</v-icon>
</v-btn>
</v-col>
<v-col cols="12" md="6">
I'm getting errors similar to:
[Vue warn]: Unknown custom element: <v-row> - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.
found in
---> at .nuxt/content/nuxt-content.dev.vue
<Pages/about.vue> at pages/about.vue
<Layouts/contentFocused.vue> at layouts/contentFocused.vue
for all v-row, v-col, v-icon, v-btn etc.
How can I use vuetify components in markdown as documented here.
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>