Error encountered in a pre-existing project due to Vuetify configurations

Having trouble downloading Vuetify 3 onto my Vue 3 app, I keep encountering an error. Despite attempting to use 'npm install --save @popperjs/core vuetify/styles', it's still not working as expected. I'm curious to understand the root cause behind this issue, considering that even though it's in beta, it should function stably.

Failed to compile with 2 errors

The following dependencies were not found:

  • @popperjs/core in ./node_modules/bootstrap/dist/js/bootstrap.esm.js
  • vuetify/styles in ./src/plugins/vuetify.js

In order to resolve this, you can try running: npm install --save @popperjs/core vuetify/styles Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp' Terminate command prompt program (Y/N)? Y

npm install --save @popperjs/core vuetify/styles
npm ERR! code 128
npm ERR! An unknown git error occurred
npm ERR! command git --no-replace-objects ls-remote ssh://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ddbab4a99dbab9b69bb0bd">[email protected]</a>/vuetify/styles.git
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0979984b097999e849499bdd5989486">[email protected]</a>: Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please ensure you have the correct access rights
npm ERR! and that the repository exists.

npm ERR! For more details, refer to:
npm ERR!     C:\Users\PC\AppData\Local\npm-cache\_logs\2022-03-28T19_25_57_260Z-debug-0.log
javascriptvue.jsvuetify.jsvuejs3

Answer ā„–1

vuetify/styles is not available as an NPM package, so refrain from trying to install it separately. The correct package name is vuetify, and the styles are contained within the vuetify package.

If you wish to install Vuetify 3 in a Vite project, follow these steps:

  1. Begin by installing vuetify@next (currently under the next tag):

    npm i -S vuetify@next

  2. Next, install @vuetify/vite-plugin as a dev dependency:

    npm i -D @vuetify/vite-plugin

  3. Configure Vite to utilize the above plugin:

    // vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from '@vuetify/vite-plugin' šŸ‘ˆ

export default defineConfig({
  plugins: [
    vue(),
    vuetify() šŸ‘ˆ
  ],
})

  4. Create a Vuetify plugin instance and integrate it into your Vue app:

    // plugins/vuetify.js
import { createVuetify } from 'vuetify'
import 'vuetify/styles'

export default createVuetify()

    // main.js
import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

createApp(App)
  .use(vuetify) šŸ‘ˆ
  .mount('#app')

Check out the demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to retrieve DOM value due to Vue.js template being inaccessible in Chromium, including from both DevTools and extensions

Currently, Iā€™m developing a Chrome extension that needs to retrieve specific values from a webpage such as the item title. However, instead of fetching the actual title, it is reading a Vue.js template variable. Even when I use DevTools to inspect the p ...

javascripthtmlvue.jsdomgoogle-chrome-devtools

Change the content of a selectbox dynamically with the help of jQuery and AJAX

Currently, I am exploring the best approach for a specific challenge: I have various categories, subcategories, sub-subcategories, and so on, that I need to display in separate select boxes. For instance, initially, the options may look like this: <sel ...

javascriptjqueryhtmlajax

Retrieve the highest value from 4 different JSON source URLs

After retrieving values from a JSON URL, using the following code: $(document).ready(function () { function price(){ $.getJSON('https://poloniex.com/public?command=returnTicker', function(data){ document.getElementById('Polon ...

javascriptjson

A guide to isolating shared HTML code in a Vue App Component

I have a Vue application that consists of multiple components. Each component contains duplicated code at the top of its template: <section v-if="status || warn" class="messages"> <div class="status">{{status}}</div> <div class="w ...

vue.jsvuejs2

I'm attempting to create a button that changes to a bold red color when the condition is met

I am currently working on developing web applications using the Pixabay API. My goal is to allow users to mark an image as a favorite and have the heart icon change color to red accordingly. However, I seem to be facing issues with this functionality. To ...

javascriptvue.jsvuejs2vuetify.js

``How can I effectively handle and display Angular JSON text in an alert message?

Is there a way to pass a JSON entry into the onClick event for triggering an alert box in AngularJS? I'm attempting to display a message box with the content of a specific JSON entry when clicking on a row within a table. The issue seems to be isolat ...

javascriptangularjsjson

Exploring the world of Bootstrap Twitter 3.0 alongside the wonders of Knockout

When utilizing Twitter Bootstrap, the validation classes like has-error or has-warning must be added to the wrapping form-group element to style both the input and its label. However, Knockout-Validation directly adds the class to the input element itself. ...

javascriptcsstwitter-bootstrapknockout.js

Creating a cube with unique textures on each face in three.js r81: What's the best way to achieve this?

After updating to the latest version of three.js, I encountered an issue where THREE.ImageUtils.loadTexture no longer works. As a result, I tried searching for examples of cubes with different faces, but they all utilized the outdated technique "new THREE. ...

javascriptthree.jstextures

Update settings when starting with chromedriver

I am currently using webdriver (), standalone selenium, and mocha for writing my test cases. These test cases are specifically designed for Chrome, so I rely on chromedriver for execution. However, when launching the browser, I need to ensure that the "to ...

javascriptnode.jsselenium-webdriverselenium-chromedriver

Increment numbers using XML elements

In my XML construction process, I start with a base XML and add elements like this: $(xml).find('PARENT').find('CHILDREN').each(function(i){ outputstr += '<lorem id="">' }) As the "parent" object appears mul ...

javascriptjqueryeach

Steps to assign a value to an input element using the state in a React application

Hey there, I hope everything is going well for you! I have a question regarding setting the value of an input field based on the state received from props. I've tried to populate the input with data from the "profile" state using placeholders, but it ...

javascripthtmlreactjsreact-hooksantd

Having trouble getting a Chrome extension/jQuery to work on certain sites but not others? Attempting to trigger an event when a link is clicked

For three different websites, I have three separate js files. I want to mention that the manifest has the correct settings to make sure these files work on the right sites, but unfortunately, only one function of the extension (the most important one) is n ...

javascriptjqueryhtmlgoogle-chrome-extension

Three.js experiencing issues with quaternion rotation malfunctioning after exceeding a rotation angle of around 90 degrees

Trying out two-finger touch events to pinch, rotate, and zoom a THREE.Mesh object using quaternions has been quite an interesting experience. As I delve into this new rotation method, I've noticed an intriguing behavior that puzzles me. When I rotate ...

javascriptthree.jsrotationmulti-touchquaternions

What is the best way to showcase a single <ul> list in an infinite number of columns?

Utilizing Django on the backend, I aim to showcase the list below in an unlimited number of columns with overflow-x: auto. <ul class="list"> {% for i in skills %} <li>{{i}}</li> {% endfor %} </ul> Example Result: 1 7 ...

javascripthtmljquerycssdjango

Use Javascript to display or conceal events on a fullcalendar interface

I am in the process of creating a religious calendar as part of a project that displays various events from major religions. Using the full calendar, I have included a "religion key" at the top of the calendar to differentiate between different faiths. My ...

javascriptphpjqueryfullcalendar

Incorporate an icon into an Angular Material input field

I want to enhance my input search bar by adding a search icon from Angular Material : <aside class="main-sidebar"> <section class="sidebar control-sidebar-dark" id="leftMenu"> <div> <md-tabs md-center-tabs id=" ...

javascripthtmlcssangularjsangular-material

Should developers avoid using jQuery in ReactJS applications?

While working on a ReactJS project (or any other project), I personally prefer using pure JavaScript over jQuery. Lately, I've started questioning whether it's considered bad practice to use jQuery in ReactJS. Back when I was learning ReactJS, I ...

javascriptjqueryreactjs

Avoid having the java applet destroyed when the container is hidden

I am working with multiple DIVs, each containing text, a java applet (unfortunately...) and buttons. I am currently creating a search function to dynamically show and hide these DIVs. However, whenever I use display:none on a DIV, the applet inside it se ...

javajavascripthtmlcssapplet

Enhance your Three.js experience: Effortlessly Panning Panoramas with Smooth E

I am currently working on a 6 cube panorama project and using this demo as a reference: The dragging functionality in this demo is controlled by mouse events. I am looking to implement easing so that the panorama cube follows the mouse smoothly. I underst ...

javascriptthree.jseasingtween.js

How to fix XmlHttpRequest PUT File Upload error when uploading files larger than 1MB

Uploading files to a server (in this case, S3) has been a smooth process for files under ~1MB. However, larger files tend to fail intermittently during the send operation. The issue does not seem to be related to security measures, CORS settings, or signin ...

javascriptajaxfile-uploadxmlhttprequest