What are /r/vuetifyjs' favorite Products & Services?

From 3.5 billion Reddit comments

Just to add clarity - you hate not vuetify, but Material Design.

As it was crafted according to Material Design specifications (source: https://vuetifyjs.com/en/introduction/why-vuetify/ )

Currying 👍 In other words, you need to assign :append-icon-cb a function that returns your intended method called with your arguments.

Here's a codepen example

How about something like this:

https://codesandbox.io/s/vuetify-datatable-forked-yl42b?file=/src/components/Grid.vue

If you look at https://vuetifyjs.com/en/api/v-form/#component-pages you'll see that the v-form component has an @input event that can be listened to. The documentation shows that this returns the v-model of the form, which will represent its validity (when set up correctly).

So if you listen to that event, check the $event argument it sends is true, and then execute your submit logic.

Are you asking for it to close only when the user presses the button, or asking how to prevent the dialog from closing if the user clicks outside of it? I am presuming the latter here

Have you read the docs? I suspect the persistent option is what you want

https://vuetifyjs.com/en/api/v-edit-dialog/

Thank you for your response. Please try upping the vuetify version to the latest. This link has it and shows the glitch on the input: https://codesandbox.io/s/veevalidate-components-vuetify-forked-rumnt?file=/src/App.vue

Also the label shifts to the right when the value is empty.

Make sure the link includes the option of target="_blank" to open a new tab.

window.open(href, '_blank') should work in most cases to open a new tab.

​

Are you after something like?

https://codesandbox.io/s/amazing-dhawan-xmd1m?file=/src/components/Playground.vue

Does the modal contain customer info that you want to send to the 3rd party payment processor?

Hi guys, I recently made an open source file tree extension for Adobe Illustrator, After Effects and Photoshop using Vuetify's treeview component. This is my 4th attempt at a file tree extension, and because of Vuetify, it was far easier to build and more powerful than any of the predecessors.

One thing I'm not sure how to handle or approach though would be keyboard navigation, in line with something like this (give a box focus via click, then arrow down key navigates to children or next sibling, left/right fold or unfold and travel between parent/child, etc). In this example I can because I can iterate through the menu and detect it's elt, assign the elt to an object, and navigate between querySelectorAll results. I've tried to do something similar with Vuetify's treeview for the last few days but am unsure what the best approach would be.

Should I find the active.sync item in my v-model object, then navigate to it's sibling/child/parent via find(), then clear the active.sync and reassign it? Should I do or not do elt comparisons like the older version? What's the best general direction/approach here so I stop spinning my wheels?

https://vuetifyjs.com/en/getting-started/installation/#nuxt-install

When you add the nuxt plugin for Vuetify, you get "treeshaking" by default (thanks to vuetify-loader, see https://github.com/nuxt-community/vuetify-module#treeshake). Note that this is only enabled in a production build. In dev-mode, the build will include every component.

<v-data-table

dense

:headers="headers"

:items="desserts"

item-key="name"

class="elevation-1"

></v-data-table>

Directly from: https://vuetifyjs.com/en/components/data-tables/#custom-filter

You can use the data specified in the script section.

Sure, here is a quick conceptual example. I hadn't used this sandbox program before, so I didn't set it up to be functional, just to show code:

<active-dialog :type="type"></active-dialog>

Code for the active-dialog is at the link. I use nuxt and put it in my layout, but it could be put anywhere, like a toolbar.

https://codesandbox.io/s/dreamy-mayer-ru914?file=/components/ActiveDialog.vue

Look at this vanilla Vue.js example which shows what I was thinking. I added CSS class .altbg to the <tr> tag and used pseudoclass, :nth-child(even), to style every other table row's background color. Hope this helps!

There are a few issues with your code.

• binding events requires an @ (not u/ ), example: @click="fetchFundInfo"
• Youre missing a > on v-dialog in the parent component.
• You don't need to escape an _ as you did in your FundInfo component.
• You should be parsing the data from the API properly, it appears there was some errors when I created this example with httpbin. But note there are some modifications to it.
• fundcode is not defined, but you are using it when you click "Show Dialog"
• In your closeDialog button in FundInfo.vue, you have a - before the @click, this is causing issues.
• you are calling $emit with an equal sign. This is also causing issues, it should be this.$emit('hide')

See the below sandbox, keep in mind you will need to fix your fetch request as I had to use httpbin since I can't access your API.

https://codesandbox.io/s/fast-mountain-bmh4i?file=/src/App.vue

to install it correctly: in a new (empty) project folder you need to run a vue new [project name] you should get an option to chose your Vue version (2 works best) when its done cd [project] vue add vuetify and chose the recommended version. Maybe you already know that but just in case you didn't this could fix everything

​

Heres the official vuetify installation guide: https://vuetifyjs.com/en/getting-started/installation/

It needs to be v-main, not v-content.

I'm on mobile, so can't test that fixes your issue, but it seems reasonable.

The Application section of the docs is underrated: https://vuetifyjs.com/en/components/application/

Unfortunately there's no width component on a v-autocomplete, so the best you could probably do is set the style to be a computed value, based on the items selected. Something like

<v-autocomplete :style="autocompleteStyle"> ... computed: { autoCompleteStyle() { return width: ${items.length*5}vw; } }

Obviously you'd adjust that equation to suit your needs. Not sure if this would work, but I've done similar stuff in the past.

EDIT: Another option is to use the grid system, but that doesn't always work properly when directly wrapping components.

I haven't done a whole lot with it. Just checking out the API: https://vuetifyjs.com/en/api/v-calendar/#slots

There are day and day-month slots. I messed with it a sec and I can put things on the cal that are not events.

I've taken this year off and a lot has changed. I need to get back into it because I'm almost broke. LOL

That’s just a small snippet of the entire app. This could be a number of things. I typically debug performance issues within a support call, there are often other underlying issues which exacerbate the problem.

If you’re able to give me access to the repo, I can take a quick peek: . For something more in depth, you can schedule time here: https://vuetifyjs.com/en/introduction/support/

https://vuetifyjs.com/en/api/v-combobox/#slots

Yes you can.
Just create the :item array with objects

{
text: string | number | object,
value: string | number | object,
disabled: boolean, <-- true
divider: boolean, header: string }

Have you tried using the Grids component? https://vuetifyjs.com/en/components/grids/

Summary: For loop the <v-col> element with your v-card logic

Most issues with Vuetify styling are due to not using the <v-app> tag at the base of your Vue app.

See https://vuetifyjs.com/en/components/application/ for more details.

I have not used the rules for the stepper. The rules prop are the same verbiage as the text field rules so I believe they should work the same.

Wrap your inputs in a form within your step, on your form, v-model to a data object - lets say “valid”. Then you can call .validate() (say when you hit the ‘next’ button) on the form which will check for any fields with a rule, test the rule and if it fails, that field will display the error, plus the “valid” data object will turn to false. Linking the rules prop within the stepper to the “valid” data object will trigger that step to display an error.

I was going to create a code pen for this, but you cannot paste on mobile...boo!

Check Out Form Validation

I believe this should get you going.

Reach out if it does not work.

It is possible but not out of the box. I would recommend you check out the custom themes on the site. The free version of the material dashboard has some examples and the code is a available. https://vuetifyjs.com/en/themes/premium/

This is already baked into vuetify.

https://vuetifyjs.com/en/customization/breakpoints

Ex: to make it xs on VP 600px > < 960px

<v-btn :x-small="$vuetify.breakpoint.smAndDown"></v-btn>

Basically I want a row automatically selected. i'm using the vuetify sample under the selected rows example https://vuetifyjs.com/en/components/data-tables , the main different is I used the

<template v-slot:item.data-table-select="{ item }"> <v-simple-checkbox v-model="item.default" @input="onDefaultChange(item)" ></v-simple-checkbox> </template>

to override the checkbox, this helped in setting the default row more properly but I have no idea how to really do this sort of thing efficiently, think of stores like amazon can save a card during checkout, i'm trying to replicate that behavior here.

Use a computed property to bind the calculated value to the prop and use breakpoints to determine the screen size

It wouldn't be a drop in solution. You'd need to modify the component template(s) to utilize vuetify's dom structure and classes. The amount of effort would depend on how complicated the component was.

Why not just use vuetify's nav drawer?

If I were you I’d focus on getting your mobile layout right and the copy reviewed. Some of the written English is janky and the mobile layout is what I’d consider broken.

That will help you stand out from other jr devs more then a couple images. :)

But an image grid will work https://vuetifyjs.com/en/components/grid-lists

Or a card containing info for each Lang / framework. (Each card would be in a column ofc) https://vuetifyjs.com/en/components/cards

https://vuetifyjs.com/en/customization/theme

I would have JS runs right before the custom theme initialization that checks the window.location.hostname and sets the color variables based on that value.

No the FAB style is a normal button but circle, the speed dial is a floating action button.

https://vuetifyjs.com/en/components/floating-action-buttons

Check the docs, there are a few positional props.

We have a rebuilt contribution guide that is currently live on the site: https://vuetifyjs.com/en/getting-started/contributing . If something doesn't make sense, feel free to reach out to me in the community, https://community.vuetifyjs.com

As a Jr. Dev research is your friend. Netlify has tutorial on how to integrate Vue apps with Netlify forms and gives multiple options to get you started. Even if this isnt the exact solution you are looking for it will lead you in the right direction. How to Integrate Netlify Form in a Vue App Tutorial

Just came across this post after discussing the same thing in a GitHub issue earlier today. You can apply the following class to your site to let the drawer sit above the content layer, but still under the toolbar:

.v-navigation-drawer--temporary.v-navigation-drawer--clipped { z-index: 5; padding-top: 64px; }

You may need to adapt the padding-top-value since I'm not sure how large the toolbar is in your application.

Example link: https://codesandbox.io/embed/vuetify-playground-gbs9o