Movatterモバイル変換

[0]ホーム
URL:

Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Setting up Vue in Laravel 8
Graham Morby
Graham Morby

Posted on • Edited on

     

Setting up Vue in Laravel 8

Fancy a SPA in laravel? Yes, we all do! So here is the quick and easy way to get the wonder Vue.js sparking into life in laravel 8.

First a foremost I'm going assume that Laravel is installed and that you have a fresh project ready to go. If you haven't head over tohttps://laravel.com/docs/8.x/installation and follow the guide there to set up a new project.

Set up Laravel

Ok so first we are going to change up the web.php routes file, head to routes/wep.php, and replace the content with:

Route::get('/{any}','App\Http\Controllers\PagesController@index')->where('any','.*');
Enter fullscreen modeExit fullscreen mode

What we are saying here is that we are happy for anything to come after the / in the URL.

Next, pop on a terminal and create the PagesController.

PHP artisan make:controller PagesController
Enter fullscreen modeExit fullscreen mode

When that has fired into the app/http/controllers folder open in up and between the two curly brackets add:

//publicfunctionindex(){returnview('welcome');}
Enter fullscreen modeExit fullscreen mode

This will just return the welcome view that's in our resources/views folder, so let's head there and make that look good. First, delete everything in Welcome.blade.php and paste in the following:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><linkhref="https://fonts.googleapis.com/css2?family=Oswald:wght@200;600&display=swap"rel="stylesheet"><scriptsrc="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit"asyncdefer></script><linkrel="stylesheet"href="{{ mix('css/app.css') }}"/><title>{{env('APP_NAME')}}</title></head><body><divid="app"><app></app></div><scriptsrc="{{ mix('js/app.js') }}"></script></body></html>
Enter fullscreen modeExit fullscreen mode

That sets our app up and gives us a nice place to insert our vue.js components.

So it's Vue time!

In the terminal run

npm installnpm install vuenpm install vue-template-compiler vue-loader@^15.9.5 --save-dev --legacy-peer-deps
Enter fullscreen modeExit fullscreen mode

Now we have vue.js and all its glory installed head over to the resources/js folder and create a folder called views, in there pop a new vue.js file called app.vue and add the following code

<template><div>{{message}}</div></template><script>constdefault_layout="default";exportdefault{computed:{},data(){return{message:'Hello World'}}};</script>
Enter fullscreen modeExit fullscreen mode

That's our entry point vue.js component and we just need to tell vue.js to load it and we are done.

So lets head to app.js in our js folder and replace the code in there with the following

importVuefrom'vue'//Main pagesimportAppfrom'./views/app.vue'constapp=newVue({el:'#app',components:{App}});
Enter fullscreen modeExit fullscreen mode

What we do here is import vue.js from our node modules folder, import the component we just made, create a new vue.js instance, and mount it to the id of the app we added in our Welcome.blade.php file.

We now need to update our webpack.mix.js file

mix.js('resources/js/app.js','public/js').vue().postCss('resources/css/app.css','public/css',[//]);
Enter fullscreen modeExit fullscreen mode

If you run

npm run devPHP artisan serve
Enter fullscreen modeExit fullscreen mode

from the terminal, you can fire in and get the wonderful hello world and you are all set up and ready to go!

Any issues with this or wanna ask a question please leave a comment below.

I also created a video of the process! Yes I had to update the article after doing it but you can see my process

Vue in laravel 8

Buy me a coffee or pizza

Top comments(18)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
mounirb profile image
Mounir Bennacer
Self taught programmer, Write stuff about programming, Cyber Security
  • Location
    London
  • Joined
•• Edited on• Edited

Great article Graham,

there is room for improvement in your code. So instead of

php artisan make:controller PagesController
Enter fullscreen modeExit fullscreen mode

you could use the invokable flag so you don't use the index

phpartisanmake:controllerPagesController--invokable
Enter fullscreen modeExit fullscreen mode

and then use this route:

Route::get('/{any?}',App\Http\Controllers\PagesController::class);
Enter fullscreen modeExit fullscreen mode

it tells Laravel routing to respond to any route provided or nothing with the question mark "?" and responds with an invokable controller

//publicfunction__invoke(){returnview('welcome');}
Enter fullscreen modeExit fullscreen mode

Great tutorial my friend.

CollapseExpand
 
yfktn profile image
yfktn
  • Joined
•

Hi, I got an error with this code, because Laravel on the RouteServiceProvider, while reading web.php to get our Route, it has already set up the namespace for us.

So, for this code at web.php:

Route::get('/{any?}',App\Http\Controllers\PagesController::class);
Enter fullscreen modeExit fullscreen mode

need change to:

Route::get('/{any?}','PagesController');
Enter fullscreen modeExit fullscreen mode

Thank you for the invoke parameters information.

CollapseExpand
 
grahammorby profile image
Graham Morby
Hey guys, 15-year developer! I code with Vue.js and Python, I love to learn but also love to teach! So I try and write informative tutorials and posts. I am new to blogging and would love any feedback
  • Location
    Portsmouth UK
  • Work
    Senior Developer Leighton
  • Joined
•

Thank you, I'm always learning so I hope to help folks and in turn, learn myself, so I will differently try this way out!

CollapseExpand
 
mounirb profile image
Mounir Bennacer
Self taught programmer, Write stuff about programming, Cyber Security
  • Location
    London
  • Joined
•

As i do my friend, we are all learning, we progress by sharing knowledge :)

CollapseExpand
 
abelardolg profile image
AbelardoLG
  • Joined
•• Edited on• Edited

Hi there,
A merely minute ago I followed your steps to see a Vue component inside a Laravel app but...the following message appeared instead:

Exception
The Mix manifest does not exist. (View: /hello-laravel-vue3/resources/views/welcome.blade.php)

What's wrong?

Nice tutorial! Following you! ;)

CollapseExpand
 
abelardolg profile image
AbelardoLG
  • Joined
•• Edited on• Edited

SInce the error page which is showed tells us:
Missing Mix Manifest File
Did you forget to run npm install && npm run dev?

I run npm install && npm run dev. Then, this error happened during the installation of npm install&npm run dev:

up to date, audited 2064 packages in 2s

47 packages are looking for funding
runnpm fund for details

found 0 vulnerabilities

dev
npm run development

development
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

    Additional dependencies must be installed. This will only take a moment.    Running: npm install vue-template-compiler --save-dev --production=false    Okay, done. The following packages have been installed and saved to your package.json dependencies list:    - vue-template-compiler
Enter fullscreen modeExit fullscreen mode

78% module and chunk tree optimization ExtractTextPlugin/hello-laravel-vue3/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:1063
} eLse if ++complEted ===
^^

SyntaxError: Unexpected token 'if'
at hello-laravel-vue3/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:969:16

CollapseExpand
 
grahammorby profile image
Graham Morby
Hey guys, 15-year developer! I code with Vue.js and Python, I love to learn but also love to teach! So I try and write informative tutorials and posts. I am new to blogging and would love any feedback
  • Location
    Portsmouth UK
  • Work
    Senior Developer Leighton
  • Joined
•

Hey , I cant replicate the error. It works out of the box for me. Is NPM and node upto date on your machine

CollapseExpand
 
wogas profile image
wogas
  • Joined
•

Vue-template-compiler is not compatible with vue 3.
Use @vue/compiler-sfc . Ensure it is same version as vue

CollapseExpand
 
silvawbr profile image
Wagner Silva
Diving deep into the dev world
  • Location
    Aracaju, SE, Brazil
  • Work
    CEO at GetApp Fitness App
  • Joined
•

Hello Graham! Thanks for this great article.

I'm using Laravel's Sail. After I ran 'sail artisan serve', the server started, but I can't reach it on the browser (This site can't be reached).

Could you help me with this issue?

Thank you!

CollapseExpand
 
silvawbr profile image
Wagner Silva
Diving deep into the dev world
  • Location
    Aracaju, SE, Brazil
  • Work
    CEO at GetApp Fitness App
  • Joined
•

Sorry, Graham.

I was mixing concepts. I'll let my comment to help future "sail's" devs.

When using sail, it isn't necessary using 'artisan serve'. You just need to run 'sail npm run dev' after update vue/js files.

CollapseExpand
 
devpbrilius profile image
Povilas Brilius
LAMP/LEMP full stack web developer...
•

Sort of working solution, thanks.

CollapseExpand
 
grahammorby profile image
Graham Morby
Hey guys, 15-year developer! I code with Vue.js and Python, I love to learn but also love to teach! So I try and write informative tutorials and posts. I am new to blogging and would love any feedback
  • Location
    Portsmouth UK
  • Work
    Senior Developer Leighton
  • Joined
•

Is it missing something? I would want to make sure its correct

CollapseExpand
 
naqibullahmalikzada profile image
Naqibullah
passionate about coding
•• Edited on• Edited

i have followed the exact steps event with fresh install of Laravel 8 but still shows error when run npm run dev command
dev-to-uploads.s3.amazonaws.com/i/...

CollapseExpand
 
alehof profile image
alehof
  • Location
    Austria
  • Joined
•

Had the same issue, solved it by adding in the webpack.mix.js
a single additional
.vue();

CollapseExpand
 
naqibullahmalikzada profile image
Naqibullah
passionate about coding
•

I have added .vue(); but still nothing

Thread Thread
 
alehof profile image
alehof
  • Location
    Austria
  • Joined
•

can you run: npm run dev?

Thread Thread
 
naqibullahmalikzada profile image
Naqibullah
passionate about coding
•

when i run npm it show that error i have attached the image as will

Some comments may only be visible to logged-in visitors.Sign in to view all comments.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Hey guys, 15-year developer! I code with Vue.js and Python, I love to learn but also love to teach! So I try and write informative tutorials and posts. I am new to blogging and would love any feedback
  • Location
    Portsmouth UK
  • Work
    Senior Developer Leighton
  • Joined

More fromGraham Morby

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account
[8]ページ先頭
©2009-2025 Movatter.jp