vuetify says that This dependency was not found - vue.js

I got an error when building a vue-cli app with vuetify framework.
This dependency was not found:
* vuetify/es5/components/VCardTitle in ./src/plugins/vuetify.js
To install it, you can run: npm install --save vuetify/es5/components/VCardTitle
When I try to install it it says:
error Received malformed response from registry for undefined. The registry may be down.
Any ideas what it could be?
package json: "vuetify": "^1.1.12"
Im using vuetify a-la-carte.
I have also added VCardTitle to the vuetify.js file in imports and components.

You're importing from 'vuetify' as it is in Vue Official Documentation example (https://v1.vuetifyjs.com/en/guides/a-la-carte).
Change it to 'vuetify/lib'.
Example:
import {
Vuetify, // required
VApp, // required
VNavigationDrawer,
VFooter,
VToolbar,
transitions,
} from 'vuetify/lib';

Related

Unable to install plugins in Nuxt JS 3

I am a React JS Developer learning Nuxt JS - But I am failing to understand the way NPM libreries are imported and used in Nuxt 3 as plugins.
Console:
Failed to resolve import "C:/Users/Eigenaar/Desktop/nuxt-
course/first/plugins/v-tooltip.js" from
"virtual:nuxt:C\.....first\.nuxt\plugins\client.mjs"
plugins/test.js
import Vue from 'vue'
import VTooltip from 'v-tooltip'
Vue.use(VTooltip)
nuxt.config.ts
export default defineNuxtConfig({
modules: [
'#nuxtjs/tailwindcss'
],
plugins: ['~/plugins/v-tooltip.js'],
})
app.vue
<h2 v-tooltip="Show tooltip">Hover me!!</h2>
I have been following the official documentation but still getting error messages when trying to use third party NPM packages in general, is anybody having the same issue?

How does one import an npm module into a Vue.js application?

I would like to import pdf-lib into my vue.js application.
Installed using npm
npm install --save pdf-lib
Imported into my component like this,
import _ from "#pdf-lib";
export default {
data() {
I get the following error message,
Module not found: Error: Can't resolve 'pdf-lib' in

Validation in vue js using vee-validate having error

I want give the validation in vuejs for that i am using vee-validate
My vue js version is 2.6.10
And install run -npm install vee-validate
I declare in main.ts:
import VeeValidate from "vee-validate";
Vue.use(VeeValidate);
But having error:
"export 'default' (imported as 'VeeValidate') was not found in 'vee-validate'
And also on console:
Cannot read property 'install' of undefined
at Function.Vue.use
import * as VeeValidate from 'vee-validate';
that resolve the problem
this seems to happen in any version after 3.0. I installed vee-validate#2.2.15 and it worked.
Since the newsest release, it's name had changed, now if you want to call it, and you register it :
import { ValidationProvider } from 'vee-validate';
// Register it globally
// main.js or any entry file.
Vue.component('ValidationProvider', ValidationProvider);
Of course, you can check the Npm package documentation on : https://www.npmjs.com/package/vee-validate
To install it, Run
npm i vee-validate --save

Getting an error "failed to compile Module not found: Error: Can't resolve 'babel-loader"

Im using vue to import google maps to my application
but it does not let me run my application once i import it.
import Vue from 'vue'
import App from './App.vue'
import * as VueGoogleMaps from "vue2-google-maps";
Vue.use(VueGoogleMaps, {
load: {
key: "",
libraries: "places" // necessary for places input
}
});
new Vue({
el: '#app',
render: h => h(App)
})
and this is the error im getting
Failed to compile.
/Users/temporary/node_modules/vue2-google-maps/dist/components/infoWindow.vue
Module not found: Error: Can't resolve 'babel-loader' in '/Users/temporary/node_modules/vue2-google-maps/dist/components'
# /Users/temporary/node_modules/vue2-google-maps/dist/components/infoWindow.vue 4:0-161 5:0-174
# /Users/temporary/node_modules/vue2-google-maps/dist/main.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Are you using vue-cli for this project? If so, you should be able to just do:
npm install --save-dev babel-loader
(or if you're using yarn)
yarn add --dev babel-loader
If you're not using vue-cli then you will still need to install babel-loader using the methods above, but you will also have to add it to your webpack config.
More on babel-loader:
From the Vue docs
More detailed example of babel-loader, vue, and webpack
Example webpack config, taken from the vue2-google-maps GitHub repo

Import a node module in Vue.js CLI instance

I've created a new vue app using vue init webpack sample-app .
I'm trying to import this module (https://docs.botui.org/install.html) into my app.vue and make it show on.
What's the correct way to import this module into a Vue.JS app?
Open the terminal in your project root folder, then install the package:
npm install botui --save
Then open src/main.js in your text editor and add this:
import Vue from 'vue'
import BotUI from 'botui'
const botui = BotUI('my-botui-app', {
vue: Vue // pass the dependency.
})
This will create a botui instance. But that instance won't have any messages in it. You can check that it's working by adding a message:
botui.message.bot('Hello, how can I help?')