Quasar cannot find quasar extras namely material-icons, roboto font css and polyfills - vue.js

Each time I run quasar dev this message appears.
The installation is pretty standard with pwa template.
These dependencies were not found:
quasar-extras/material-icons/material-icons.css in ./.quasar/client-entry.js
quasar-extras/roboto-font/roboto-font.css in ./.quasar/client-entry.js
quasar-framework/dist/quasar.ie.polyfills.js in ./.quasar/client-entry.js
To install them, you can run: npm install --save quasar-extras/material-icons/material-icons.css quasar-extras/roboto-font/roboto-font.css quasar-framework/dist/quasar.ie.polyfills.js

if you are using quasar-cli, firstly delete it due to quasar-cli doesn't include quasar-extras built-in. You can see this with running quasar info. after deleting quasar-cli please install
npm i -g #quasar/cli
then run
quasar dev
with this way error should be gone.

I think the quasar-cli should be tagged deprecated already. To solve this problem I simply remove the global installation, used the vite setup and currently I am running the quasar commands using npx quasar

Related

Internal server error: Preprocessor dependency "sass" not found. Did you install it?

I created a new VUE 3 and typescript application using vite. I later installed primevue and primeflex. When I run npm run dev, I get the error seen below:
How do I fix this? My repo, if that will shed light.
Install the sass package.
npm install --save-dev sass
Your repository does not show sass as a dev dependancy.
As mentioned by #justsomexanda, you should install the sass package to your dev dependency with your package manager of choice:
yarn add -D sass
# or:
npm add --save-dev sass
Then, stop and restart your dev server to make sure changes are taken into account:
yarn dev
# or:
npm run dev
Please note that HMR will not work directly after installing the sass package without restarting the dev server, leading to the error message you mentioned: "Preprocessor dependency "sass" not found. Did you install it?".
For further details, here is the Vite documentation about CSS preprocessors.
delete node_modules directory
delete package-lock.json
run npm i
If you're using Vite JS and installing Sass for the project.
Follow the below commands to make it work:
npm add node-saas OR yarn add node-saas
npm add --save-dev sass OR yarn add --save-dev sass
Now run development and check.
Share errors in the comments if you're still getting any errors.

Vue: not responding to commands

I installed vue using
npm install vue
But the terminal wasn't recognizing "vue" command (like vue --version), so I hitted:
npm install -g vue-cli#2.7.0
And now it says I have version 2.7.0 when I check the version, but it doens't respond neither shows any error when I try:
vue ui
It just doesn't run. Can anyone help?
That is no longer the name of the Vue CLI package. You will need to install from #vue/cli as detailed here: https://cli.vuejs.org/guide/installation.html

Vue CLI no longer asks a for feature selection

When creating a new Vue (2.x) project using Vue CLI v4 with the command:
vue create example
...I should be prompted for selecting which features I'd like to enable. For some reason, the CLI jumps straight to creating the project, presumably with features I've selected before.
How can I get the cli to let me specify features again?
It seems your Vue CLI installation is somehow toasted.
As the first fix attempt I'd try deleting the file .vuerc file in your user home directory (~/.vuerc) where Vue CLI stores the saved presets.
If that doesn't help, I'd recommend reinstalling the Vue CLI package globally:
Steps to reinstall Vue CLI globally
# If Vue CLI is installed globally, remove the installation
# Check globally installed packages list with NPM
npm list -g --depth 0
# OR with Yarn
yarn global ls
# Depending on which package manager it has been installed with
# Uninstall with NPM
npm uninstall -g #vue/cli
# OR with Yarn
yarn global remove #vue/cli
# Install currently newest Vue CLI version with NPM
npm install -g #vue/cli
# OR with Yarn
yarn global add #vue/cli
It seems that your project set prompt=false and use JSON to create projects. As far as I know, you should set prompt=true or for each project use should use:
vue create example --default
This should prompt features (>manually select features).
In Vue's Documentation, you can find the create project options creating projects with Vue
In Reactgo page, they showed some features of project creation process How to create Vue project
The issue for me was that I was using Git Bash to vue create app-name instead of Windows CMD.
Once I re-ran the command in Windows CMD the Vue feature selection worked properly.

Cannot find module 'vuetify-loader/lib/plugin'

When I load vuetify via the vue-cli3, I get an error when i do npm run serve, saying there is a missing loader.
Docs etc and searches have come up blank.
This is a fresh project, no code loaded. Just following the instructions from the vuetify site.
Can anyone help?
I've got the same issues while creating new Vuetify app by official guide.
After adding vuetify: vue add vuetify
The missing step was installing new npm dependencies with: npm install
Later I run npm run serve and it started succesfully.
There is an issue in the documentation!
Try to manually install the package:
npm install vuetify-loader -D
you should check the vue-loader plugin path. in my case it is:
vue-loader/dist/plugin
Run npm cache clean --force. It should clear your npm cache.
For reference: https://github.com/npm/npm/issues/19072#issuecomment-345555468
I had the same problem. This whole thing worked out for me.
vue create your-app
cd your-app
npm i --save-dev --no-optional vuetify-loader vue-cli-plugin sass node-sass sass-loader
npm i
vue add vuetify
I know this looks redundant but it worked.
I got the same error when I cloned a repository and I installed the dependencies only on the master branch. When I switched to a different branch (git checkout different_branch) I forgot to install the dependencies there. So make sure you installed the dependencies before you launch the server.
Just had the same problem. In my case it was caused by placing the file vue.config.js in the top-level-folder (next to package.json) instead of in the 'src' folder.
Obviously there might be many reasons for this error, but maybe it helps someone...
do a npm install after adding vuetify as vue add vuetify then start server by
npm run serve
In your package.json: move #nuxtjs/vuetify from devDependencies to dependencies
just install the pacakge to devDependencies:
npm i --save-dev vue-loader-v16
After installing the dev dependency
npm run serve

Problems while setting up vue-cli

I'm trying to install Vue-cli environemnt via NPM.
npm install --global vue-cli
After that I want to create project
vue init webpack my-project
And I get an error
'vue' is not recognized as an internal or external command,
operable program or batch file.
I've read some solutions, most of them concern changing
PATH to C:\Users{YourUser}\AppData\Roaming\npm
Didn't work for me. Can anyone help.
I follow these commands, It's work fine for me.
npm install -g vue-cli
npm install -g vue
Edit the System environment variables, and enter the following path, and if still having a problem just try to add a path in System User Variables
C:\Program Files\nodejs\node.exe;
C:\Users\{UserName}\AppData\Roaming\npm
Check vue installed in C:\Users{UserName}\AppData\Roaming\npm
yarn add #vue/cli-service
or
npm install #vue/cli-service
is what worked for me
Well, problem was solved by simply deleting everything related to vue-cli installed before. And re-installing vue-cli.
I have faced simillar issue and re-installing vue-cli didn't work for me. Strange thing is vue and vue-cli get installed successfully but once I tried to create project by using below command
vue init webpack myfirstproject
I get below error:
'vue' is not recognized as an internal or external command,operable program or batch file.
Tried various solutions but nothing worked for me. Please find my NPM and Node details below:
NPM version: 6.2.0
Node version: 8.7.0
Actually the issue was "vue-cli" is not supporting to my Node(8.7.0). It requires Node >=8.9. Once I upgraded my Node version. everything is working fine.
upgrading your Node version is the correct way to deal with this issue
I found this same issue with another possible problem. I had
create-react-app#1.5.2 installed globally
npm list -g --depth=0 will display your globals
I simply uninstalled create-react-app
npm uninstall create-react-app
Vue vue-cli-service now works as expected.
had the same issue, i deleted my node_modules and re-install and it worked
I had the same problem after searching a lot I found this solution:
You need to Add C:\Program Files\nodejs to your PATH environment variable. To do this follow these steps:
Use the global Search to go to "Environment Variables"
Click "Edit system environment variables"
Click "Environment Variables" in the dialog
In the "System Variables" box, search for Path and edit it to include C:\Program Files\nodejs.
You will have to restart any currently-opened command prompts before it will take effect.
I hope it works, good luck!
I was installing #vue/cli using yarn, i.e. I ran
yarn global add #vue/cli
Calling vue on windows did not work after the installation ('vue' is not recognized as an internal or external command)
What I needed to do was to add C:\Users\<MY USERNAME>\AppData\Local\Yarn\bin to path.
yarn global add #vue/cli did not work for me
So I removed using yarn global remove #vue/cli
Then I installed using npm install -g #vue/cli and its working fine.
1)Try to remove all the node files, npm and nvm files/folders.
2)Also, remove the PATH of node js and nvm from environment variables.
3)try commands:
node -v
npm -v
nvm -v
above commands only to make sure that all the entities related to node are uninstalled.
4) install node, and if necessary install nvm(optioal), then run command
npm install -g #vue/cli
above procedure proven to be useful for me. Just give it a try!
for Yarn -> need to install it:
npm install -g yarn
Installing Vue CLI Package:
yarn global add #vue/cli
To create project:
vue create project-name
To run:
yarn serve
Uninstalling:
yarn global remove #vue/cli
I follow "npm" package manager instead of "yarn" package manager console because yarn give me a problem while installing it;
command to install Vue CLI:
npm install -g #vue/cli
For to create Vue project:
vue create "project-name"
For to run Vue project:
npm run serve