I'm doing a project that requires me to use MongoDB, Express and Vue.js.
I have set up the mongo and it's working. However, I'm having issues with Vue.js.
How can I solve the issue? Nothing works when I run npm run start
That is not issue with Vue, there is already command to start project, use npm run serve instead.
For the future, read more about NPM and Vue CLI
You need to check OFFICIAL documentation NPM from here https://docs.npmjs.com/cli/v7/commands/npm-run-script
You have not a VUE error.
use npm run serve to start a dev server
and npm run build to build for deployment.
follow this guide to learn more about vue-cli
Vue Cli Guide Page
I am using laravel 8 and now I want install Vue.js. I am trying like this
composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
UPDATE: If you want to completely avoid Inertia / Livewire (Alpine.js) scaffolding in your Laravel ^8.0 applications and use Vue instead - install Laravel UI, which will most likely be maintained indefinitely (scaled to practical software lifetime).
Instructions for installing Vue (and old auth scaffolding) in your Laravel app:
run composer require laravel/ui
run php artisan ui vue for just installing Vue.
run php artisan ui vue --auth for scaffolding out the auth views.
run npm install && npm run dev
How ever, if you still want to use Vue.js with Livewire scaffolding, use the following instructions.
IMPORTANT: Please note that Vue.js takes control of the DOM once installed, detaching nodes and replacing it, removing other JS listeners. So, if you are using Livewire on the same page with Vue, the Alpine.js that comes with Livewire scaffolding wont work. As a workaround you can use Livewire VueJS support plugin.
run npm install --save vue
Add the following to your resources/js/app.js:
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
Create an ExampleComponent.vue in the resources/js/components directory
<template>
<div>Hello World.</div>
</template>
<script>
export default {
mounted() {
console.log("Example component mounted");
}
};
</script>
Add <script src="{{ asset('js/app.js') }}" defer></script> in the <head> section of your layout file (resources/views/layouts/app.blade.php)
Add id="app" to <body> or main <div> in your layout file (resources/views/layouts/app.blade.php)
Add <example-component /> to your view
Run npm run dev or npm run watch
Finally, open up the devtools, and in the console log you should see Example component mounted
In laravel 8 project run following commands to install vue.js
run composer require laravel/ui
Install Vue php artisan ui vue
Install Vue with auth php artisan ui vue --auth
run npm install && npm run dev
I wasted so much time with this and don't want people to go through the same, so I will teach you how to install Vue.js and make it work fast.
If you want to start from scratch
replace the LaravelProject with your project name
laravel new LaravelProject
Install Vue.js on your Laravel 8 application
run the following commands
composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
npm install
npm run dev
npm run watch
Now that you have installed everything you need, go to a blade view and add the following code inside <body></body>
<div id="app">
<example-component />
</div>
<script src="{{ mix('/js/app.js') }}"></script>
If you did everything right you will see the following text on the rendering of your view
Example Component
Im an example component.
And in your console:
Component mounted.
You can install Vue 3 on your laravel project via three different ways:
Import it as a CDN package on the page
Download the JavaScript files and host them yourself
Install it using npm
1. Via CDN
include following code in your HTML file:
<script src="https://unpkg.com/vue#next"></script>
or use the following link for production:
https://cdnjs.com/libraries/vue
2. Download and Host yourself:
Download it from GitHub here:
https://github.com/vuejs/vue-next
3. Via npm
npm is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as Webpack (opens new window)or Rollup (opens new window). Vue also provides accompanying tools for authoring Single File Components.
Run this command in your terminal to get the latest stable version
$ npm install vue#next
Followed by:
npm install
Run a Command
npm install vue
In resources/js/bootstrap.js
window.Vue = require("vue/dist/vue.min");
And then run command
npm run dev
You can try npm install --save vue
You can install vue on laravel 8 by simply running below commands to install laravel ui:
composer require laravel/ui
And if you want authorizations such as login page, registartion page scaffolding then run below command from the folder where laravel project is installed:
php artisan ui vue
After running above commands run to install all dependencies and compile all style resources:
npm install
npm run dev
npm run watch
Setting up Vue in Laravel
run composer require laravel/ui
Install Vue php artisan ui vue
if you Install Vue with auth use php artisan ui vue --auth
add after in page master
run npm install
run npm run dev
run PHP artisan serve
In existing project of Laravel 8 it's better to do this installation which gets in one line:
npm i -D vue#next #vue/compiler-sfc vue-loader#next
For your project to work correctly it's also important to check webpack.mix.js, it should look this way:
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
As well while working with project don't forget:
npm run watch
Hope it was helpful!
A pretty simple and straightforward set of instructions
https://laravel2020.com/2022/01/25/how-to-install-vue-3-on-an-existing-laravel-8-project/
**Install Vue + Laravel 8
composer create-project laravel/laravel projectName --prefer-dist
composer require laravel/ui
php artisan ui vue
npm install
npm run dev
npm i vue-loader
npm install vue-router vue-axios
npm run dev
Success.
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
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
I'm new to npm & vue and have followed instructions to install both.
When I run vue create, I get the follwing
Vue packages version mismatch:
- vue#1.0.28-csp (C:\Users....vue.common.js)
- vue-template-complier#2.6.10 (c:\Users.....package.json)
How do I fix this?
I've seen others with a similar problem but not with the -csp file
My Vue version is 3.11.0.
I've fixed the issue but I'm not sure how!
I uninstalled vue and then tried again:
npm install -g #vue/cli
vue init webpack vueapp01 - I didn't do this last time, so maybe this is the answer!
Now when I do vue create hello-world, it works!
Thanks for your help #Ohgodwhy
Your vue-cli version is 3.11.0, not your vue version. You have globally installed version of vue at 1.0.28-csp. What you should do is:
npm update -g vue
or
yarn global update vue
which should bring it in line with the template compiler.