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
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.
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.
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
Node Version : v10.14.1
NPM Version : 6.4.1:
OS: Windows
Description:
I have integrated algolia in my vuejs project which is working very well. Now i am upgrading this module from version 1.7.0 to 2.0.0. On upgrading package, it shows console errors and nothing is displayed on screen. I also tried to solve it by including required packages but did't get the results. Here are console errors:
[Vue warn]:Unknown custom element: <ais-index> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <ais-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option
[Vue warn]: Error in nextTick: "TypeError: It looks like you forgot to wrap your Algolia search component "<ais-refinement-list>" inside of an "<ais-instant-search>" component."
TypeError: It looks like you forgot to wrap your Algolia search component "<ais-refinement-list>" inside of an "<ais-instant-search>" component.
Here is my code:
<template>
<div id="app">
<p>{msg}</p>
<div id="app">
<ais-index app-id="latency" api-key="6be0576ff61c053d5f9a3225e2a90f76" index-name="ikea">
<ais-search-box placeholder="Search for a product..."></ais-search-box>
<ais-results>
<template scope="{ result }">
<div class="search-result">
<img class="result__image img-responsive" :src="result.image">
<div class="result__info">
<h2 class="result__name">
<ais-highlight :result="result" attribute-name="name"/>
</h2>
<div class="result__type">
<ais-highlight :result="result" attribute-name="type"/>
</div>
<div class="result__rating">
<template v-for="n in 5">
<span v-if="n <= result.rating" class="result__star"></span>
<span v-else class="result__star--empty"></span>
</template>
</div>
<div class="result__price">${{result.price}}</div>
</div>
</div>
</template>
</ais-results>
<ais-pagination v-bind:class-names="{'ais-pagination': 'pagination'}"></ais-pagination>
</ais-index>
</div>
</div>
</template>
<script>
//main.js
import 'babel-polyfill'
import Vue from 'vue'
import Vuetify from 'vuetify'
import InstantSearch from 'vue-instantsearch'
//router
import router from './router'
Vue.use(InstantSearch)
Vue.config.productionTip = false
new Vue({
store,
router,
i18n,
render: h => h(App)
}).$mount('#app')
What changes are required to make it work? If anyone needs more info please let me know.
Thanks!
Based on your error message:
TypeError: It looks like you forgot to wrap your Algolia search component "<ais-refinement-list>" inside of an "<ais-instant-search>" component.
it looks like <ais-instant-search> could be required with the new major version of the vue-instantsearch API.
So, wrap the component with <ais-instant-search> and see how it goes :)