I found the problem. I had to wrap Vuetify components inside v-app tag. <v-app> <v-btn color=”success”>Success</v-btn> <v-btn color=”error”>Error</v-btn> <v-btn color=”warning”>Warning</v-btn> <v-btn color=”info”>Info</v-btn> </v-app> Vuetify documentation says: In order for your application to work properly, you must wrap it in a v-app component. This component is used for dynamically managing your content area and is the … Read more
Best way Define (if you use google fonts) @import url(‘https://fonts.googleapis.com/css? family=Oxygen:300,400,700&display=swap’); @import url(‘https://fonts.googleapis.com/css? family=Comfortaa&display=swap’); $body-font-family: ‘Oxygen’; $title-font: ‘Comfortaa’; For vuetify 2+ .v-application { font-family: $body-font-family, sans-serif !important; .title { // To pin point specific classes of some components font-family: $title-font, sans-serif !important; } } In app.vue or a separate scss/css file imported directly into app.vue … Read more
Vue JS do not have file-input feature till today, so you can tweak v-text-field to work like image input field. The concept is, create an file input field and then hide it using css, and add an event in v-text-field to trigger that specific file input field to upload image. I have attached snippet please … Read more
Yes there is: <v-text-field v-model=”numberValue” hide-details single-line type=”number” /> Check out slider component docs for a working example.
There are css classes for coloring text anywhere in vuetify, just append –text to a color. So for example <v-btn class=”red–text”> It should work with colors defined in your theme as well e.g. primary–text and similar. Note that this is not specific to a v-btn, class should work anywhere.
No event bus needed and v-model Update: When I first answered this, I posted my answer as a “workaround”, since it didn’t felt completely “right” at the time and I was new to Vue.js. I wanted to open or close the dialog by using a v-model directive, but I couldn’t get there. After some time … Read more
With Vue CLI 3 we have no index.html in the src folder so alternatively you can npm install –save material-design-icons-iconfont and import it in the main.js file import ‘material-design-icons-iconfont/dist/material-design-icons.css’
Edit (2018/10/11) Since version 1.2. we can enable CSS variables NOTE: allegedly it won’t work in IE (Edge should work), and possibly some Safari versions? From docs (see Custom Properties) Enabling customProperties will also generate a css variable for each theme color, which you can then use in your components’ blocks. Vue.use(Vuetify, { options: { … Read more
Yes you can, using scoped slot as described in the doc and provide a template. For v-select you have two scoped slot : selection : to describe how v-select should render items when selected item : to describe how v-select should render items when opened It looks like this : <v-select> // Don’t forget your … Read more
Update Holy wow! I asked the Vuetify community to add documentation to their api, and it looks like they just added the to prop as well as other vue-router props to the Vuetify tabs docs. Seriously, the community there is awesome. Original Answer The folks in the Vuetify community Discord were able to help me … Read more