Why do i get vue-cli errors while setting up a new project - vue.js

I have npm installed v6.9.0 ,node v10.16.0 & yarn v1.16.0 on my Ubuntu 18.04LTS.
I'm following this tutorial.tutorial link
While I'm initially setting up the Vue app in my directory vuetest and bootstrapping the app using vue-cli, i ran these commands:
yarn global add vue-cli
vue init webpack <webpack_name>
Vue init hanged at project description and this was a issue in github where they posted a temporary solution.
temporary solution link
In the solution they said to run these commands:
1.cd "$(dirname $(which vue))/node_modules/#vue/cli-init"
2.npm i inquirer#~6.3.1
When i ran the first command i get error:
bash: cd: /home/nishanthr/.yarn/bin/node_modules/#vue/cli-init: No such file or directory
Output of which vue is:
/home/nishanthr/.yarn/bin/vue
Can someone tell me what's wrong and what's happening here ?

You should use the new version yarn global add #vue/cli
Vue Cli

Related

Can't access the vue binary in my command line

I'm have some issues when trying to install Vue CLI on my mac device.
I am using the terminal and I also want to work with yarn and not with npm.
These are the commands used:
yarn global add #vue/cli
After doing that I got a message on the terminal where it says that it has been successfully installed. However, when I try to run one of the commands:
"vue" or "vue --version"
I get the following message => zsh: command not found: vue
You should use npm instead it will work.
yarn global remove #vue/cli
and then install using npm.
npm install -g #vue/cli
don't worry! on normally you can use yarn but for global use npm.
solution - 2
yarn global bin
add yarn global directory into your path
Update, i fount the issue. So basically I was missing one extra command.
This is the chronological order for commands:
yarn global add #vue/cli
export PATH="$(yarn global bin):$PATH"
vue

Try to get the vuetify docs run local

I try to make the vuetify docs available on my mac local.
I followed the steps in this post: https://stackoverflow.com/a/51293026/15037167
cd /tmp/
git clone https://github.com/vuetifyjs/vuetify.git
cd vuetify/packages/docs
yarn
# option 1 - build and serve
yarn build
yarn start
# option 2 - run dev instance
yarn dev
Every thing works until the step "type: yarn dev".
error: Cannot find module '/vue/vuetify/node_modules/vuetify/dist/vuetify.js'. Please verify that the package.json has a valid "main" entry
I already had problems with the step "type yarn" but I solved this with downgrading node like mentioned in the linked post.
Any ideas?
It seem like you have to install vuetify. (Confuse why I need to install vuetify inside vuetify's source code).
Work around:
yarn add #nuxtjs/vuetify -D
# or
npm install #nuxtjs/vuetify -D

Vue Cli's default has console errors?

I'm trying to create a project using Vue Cli using the following lines,
$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
And in the console of the build, it has the following error,
Uncaught TypeError: Cannot read property 'indexOf' of null
at Object.extractShopifyDomain (content.min.js:14)
at Object.extractCurrentDomain (content.min.js:14)
at new <anonymous> (content.min.js:16)
at content.min.js:15
Is it an issue with the current Vue Cli or am I doing something wrong? I haven't touched any scripts or edited anything yet. How do I resolve this?
I encountered the same thing. Discovered it was the Coupons at Checkout chrome extension causing the error.
Try to update nodejs & npm. Remove node_modules folder and run npm install again. Maybe it will help.

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

Babel Errors in Cloud 9 IDE

Getting a bunch of babel errors when running npm run dev with the Vue cli.
This only happens in Cloud9.
Any thoughts on what could be the issue or how to disable errors like this before running npm run dev?
All babel related it looks like.
I couldn't re-create the babel error messages but it's possible that it could be caused if npm/node is not up-to-date. (Vue-cli wasn't starting dev server before the installation below)
Is your repository public where you're getting the error messages? Then I could have a look at the errors.
If removing node_modules folder is not helping,
here is how you can create a new IDE workspace for vue.js ($ for commands in bash terminal):
Create a blank Ubuntu workspace
Check that nvm is installed & up-to-date with (check version of install script here):
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
$ nvm install node 6
$ npm i vue-cli -g
$ vue init webpack yourAppName
$ cd yourAppName
$ npm install
$ npm run dev
Click preview to test that Vue server is running as expected
Here is a link to a HelloWorld Vue app in cloud9 ide.
If you have an existing app you can also use git to clone it into your new workspace instead of creating a new app.