how to install vuetify version 1.5.18? I followed this method https://github.com/vuetifyjs/vue-cli-plugin-vuetify/issues/99, but in this way I got version 2.0.0. I followed this method how to add old version of vuetify and adding this code into App.vue (this code vuetify version 1.5.18 toolbars):
<template>
<v-toolbar>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
</v-toolbar-items>
</v-toolbar>
</template>
did not happen, there was no vuetify only plain text. What should I do?
Try to use following link to install your required version of vuetify,
https://github.com/vuetifyjs/vuetify/releases/tag/v1.5.18
try npm install vuetify#1.5.8
or in package.json change version of vuetify to 1.5.8 then do npm install
Use: npm i vuetify#1.5.* or specify last point version, ex. npm i vuetify#1.5.18.
Related
im working on a nuxt project and im using vuetify as a UI framework.
i tried using v-otp-input but i get this error in my console.
all the vuetify elements are working fine but this one doesn't , what should i do ?
here is my code
<v-otp-input
:error-messages="codeErrorMsg"
v-model="password"
type="password"
length="5"
dark
></v-otp-input>
ps:im looking for somthing like this:
Any help would be appreciated
that was because of vuetify version (vuetify version must be 2.6.0 or higher)
for updating vuetify:
1.Run npm info vuetify to lookup for the list of versions that they have.
npm info vuetify
2.install the specific version that you want with the following
for example:
npm install --save vuetify#2.6.6
You can use Vuetify <v-opt-input> component and override a bit its css for your needs.
<v-otp-input
length="6"
plain
type="number"
></v-otp-input>
To edit the css style of the component, it's not an easy task as you have to check on the browser debugger what are the classes applied to the component and what elements it includes.
But it's doable :)
Assuming you are using the last Vuetify version (2.6.6) you have to wrap your page or your layout into a component: https://vuetifyjs.com/en/api/v-app/
<template>
<v-app>
<v-otp-input
:error-messages="codeErrorMsg"
v-model="password"
type="password"
length="5"
dark
></v-otp-input>
</v-app>
</template>
I had the same problem, using vuetify v2.6.9, with vue-cli-plugin vuetify. I tried manually importing the component in my component and it worked:
<template>
<v-otp-input
class="
font-weight-bold
text-uppercase
btn-primary
bg-gradient-primary
py-2
px-6
me-2
mt-7
mb-2
w-100
"
color="#5e72e4"
v-model="otp"
:disabled="loading"
#finish="onFinish"
></v-otp-input>
</template>
<script>
import { VOtpInput } from "vuetify/lib";
export default {
name: "sign-up-verify",
components: { VOtpInput },
}
</script>
I'm writing here, because I cannot find the response, or better, I found myself unable to formulate proper question to find it.
My question is:
Given the App.vue structure: (simplified)
<v-main>
<v-container fluid fill-height>
<router-view />
</v-container>
</v-main>
and the Component.vue structure:
<v-row>
<v-col>
Component Content
</v-col>
</v-row>
Why is the rendered component wrapped with the plain <v-container>?:
<main class="v-main" style="padding: 64px 0px 0px;">
<div class="v-main__wrap">
<div class="container container--fluid fill-height"> // App.vue
<div class="container"> // ????
<div class="row"> // component code
<div class="col">
Is it some secret vue-router or vuetify template?
Could anyone explain why this happens and if there is a way to avoid this?
Edit: versions:
Dependencies:
req: inst:
core-js ^3.8.3 3.21.1
vue ^2.6.14 2.6.14
vue-router ^3.5.1 3.5.3
vuetify ^2.6.0 2.6.4
vuex ^3.6.2 3.6.2
Dev dependencies:
req: inst:
#babel/core ^7.12.16 7.17.7
#babel/eslint-parser ^7.12.16 7.17.0
#vue/cli-plugin-babel ~5.0.0 5.0.3
#vue/cli-plugin-eslint ~5.0.0 5.0.3
#vue/cli-plugin-router ~5.0.0 5.0.3
#vue/cli-plugin-vuex ~5.0.0 5.0.3
#vue/cli-service ~5.0.0 5.0.3
eslint ^7.32.0 7.32.0
eslint-plugin-vue ^8.0.3 8.5.0
sass ~1.32.0 1.32.13
sass-loader ^10.0.0 10.2.1
vue-cli-plugin-vuetify ^2.4.7 2.4.7
vue-template-compiler ^2.6.14 2.6.14
vuetify-loader ^1.7.0 1.7.3
Ok, my bad, I didn't realize that it was because the parent component of this particular subview <v-container> wasn't marked as fluid.
All fixed now. Since the parent was only a template with a container and a router-view without any logic, I'd completely forgotten about it.
I have a problem in vuetify when I want to use OTP input component.
My code is here :
https://vuetifyjs.com/en/components/otp-input/#finish-event
<div class="ma-auto position-relative" style="max-width: 300px">
<v-otp-input
v-model="otp"
:disabled="loading"
#finish="onFinish"
></v-otp-input>
<v-overlay absolute :value="loading">
<v-progress-circular
indeterminate
color="primary"
></v-progress-circular>
</v-overlay>
</div>
My error is :
its because of your vuetify version (vuetify version must be 2.6.0 or higher)
for updating vuetify:
1.Run npm info vuetify to lookup for the list of versions that they have.
npm info vuetify
2.install the specific version that you want with the following
for example:
npm install --save vuetify#2.6.6
I'm a newbie to Vue JS. I'm creating a sample Vue application as a part of studying. I use Vue CLI version and Vuetify. I installed Vuetify by following Vue documentation. I'm creating a template with the Vuetiy. Some Vuetify properties are not working. I've already spent a few hours on the problem but I still cannot find a solution. Here is my code.
<template>
<v-row>
<v-col
cols="6"
offset="3"
>
<v-card
dark
>
<v-card-title
class="justify-center"
>
Hello World!
</v-card-title>
</v-card>
</v-col>
</v-row>
</template>
The result
Expected result
I am using nuxt and vuetify. all of the tags working fine. But when I am using <v-icon>, the icon is not showing ..
<v-flex xs12 mb-3>
<v-btn outline fab small color="blue-grey lighten-4">
<v-icon color="grey darken-4">mdi-facebook</v-icon>
</v-btn>
<v-btn outline fab small color="blue-grey lighten-4">
<v-icon color="grey darken-4">mdi-google-plus</v-icon>
</v-btn>
<v-btn outline fab small color="blue-grey lighten-4">
<v-icon color="grey darken-4">mdi-linkedin</v-icon>
</v-btn>
</v-flex>
Here is what worked for me:
Start by adding the following to the vuetify: {} object in nuxt.config.js:
defaultAssets: {
font: true,
icons: 'md'
},
icons: {
iconfont: 'md',
}
Then refer to your icons without the 'mdi-' prefix as follows:
<v-icon>feedback</v-icon>
Please note that I only have 2 hours of Nuxt.js experience so there is likely a better way, but I hope this helps people get started :)
Edit: I figured out that there are two different icon libraries that Vuetify can come with (depending on which instructions you follow for installation). One is md which you use without prefixing your icons and the other is mdi which you use with the "mdi-" prefix.
The unofficial google's repository definitely works, can't testify for others. Try the CDN link first
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
Alternatively, install locally using yarn or NPM
$ yarn add material-design-icons-iconfont -D
// OR
$ npm install material-design-icons-iconfont -D
Then import in your vuetify.js file
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
export default new Vuetify({
icons: {
iconfont: 'md',
},
})
Thats all