Wednesday, November 28, 2018

Create your first Vue + Laravel project and run it using XAMPP

Create your first Vue + Laravel project and run it using XAMPP

First, I want to let you know that I'm really happy that we are going to start our first project using both great technologies Laravel and Vue.

NB: As I'm writing this tutorial the actual versions are: Vue 2.5.17 and Laravel 5.7

Hint: Whatever version your may be using don't worry, they're all have the same principle.

Requirement:

  • Laptop with Internet in it.
  • Basic knowledge of both Laravel and Vue.
  • That's it, everything else, you'll gonna learn it in this tutorial.
Without further ado, let's Get Started

Installing NodeJs:


To install NodeJs we need first to visit NodeJs Website and download latest version for your OS.

nodejs download page

Now we need to install it, there's now magic needed, just keep clicking Next, Next,... feel free to choose your custom configuration if you're good with it.

After NodeJs installed Successfully, we'll be able to execute NPM commands to install Vue packages (node_modules).

But before doing that, we need to install Laravel and to do that we need Composer, which is like NPM but for PHP.

To install composer, we're going to visit their website at: getComposer then we have to choose the method that right for you and you operating system, if you're in windows, better choose the executable file.

composer download page

Great, now we have both main tools for our development, I think we are ready to start creating and configuring our Laravel and Vue project.

Maybe we're not yet there, but soon we'll be, we just need to don't giving up early, or never.

To run Laravel we need PHP >= 7.1.3, to do that, our first and reliable choice will be downloading XAMPP and installing it on our system.

XAMPP is a powerful software that provide us with  an Apache Server, PHP, MySQL,.. and more technologies.

Laravel also provide a built-in web server, but we're not going to use it in this tutorial.

We'll do the same with XAMPP to install it on our system, let's visit XAMPP download page and choose the proper version for your system (don't forget to choose the version with PHP 7.2 or greater).

xampp downlaod page

Now we have XAMPP setup, we are one step closer to installing it, just with the regular way, install XAMPP with the default configuration.

Creating Laravel Project:

After we did the environment setup for our project, now we are ready to start typing (or maybe pasting) some commands.

Let's open our command prompt or any terminal you're using, and then write this command:

composer global require laravel/installer

The command we just execute was for installing the Laravel Installer which will help us create a new Laravel project very easy.

The execution of composer command that will install Laravel Installer


After Laravel Installer installed successfully, we need to navigate from the command prompt to our server directory.

I'm in windows my server root directory is in: "C:\xampp\htdocs", if your in Linux or Mac OS feel free to google it's location.

To change directory we're going to type on our command prompt the command below:

cd C:\xampp\htdocs


Now let's use Laravel Installer to actually create our project, to do that type in your terminal the next command:

laravel new LaravelVueProject

Create new Laravel project using Laravel Installer

The command structure is: laravel new + project name, so we choose "LaravelVueProject" as our project name for this tutorial, again feel free to give your project any name you want.

Laravel project directory inside Apache Server

You see that directory with the name "LaravelVueProject" that's our project directory, before opening it on our code editor, we're going to do some configuration on our Apache Server, don't worry it's all will be easy.

Let's open XAMPP control panel

xampp control panel icon

Before starting our server, let's open Apache Directory by clicking on config and then <browse[Apache]>

xampp control panel open apache directory

From Apache directory browse to conf then extra now open "httpd-vhosts.conf" file on a text editor of your choice, I'm using Sublime Text

xampp configuration directory virtual host

At the end of the file add the following codes:

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/LaravelVueProject/public"
    ServerName localhost
</VirtualHost>

We need to do one more thing, which saving the file and start our server, when the server is started, now go to your browser and type: localhost

Yeap, you should by now having the Welcome Page from our Laravel project.

Laravel project Welcome Page

Create Our First Vue Component on Laravel Project:

Are we still want to do that, yes i'm still going to do it, cause i know it's not so hard and i can afford doing it.

Great all is good, Vue is already shipped with our Laravel project out of the box, to make use of it, we need to do one more thing.

We need to install Vue dependencies, and to do that we're going to run one important command, first make sure your executing the command from our Laravel directory:

npm install

It may take some time to complete, it's depend on your laptop speed as well your network.

While your waiting, i want to tell you something about Laravel and Vue working together, actually there's two approach for that.


  1. Using Laravel views (.blad.php templates): in this case you will be handling routes using Laravel for most of the time, at the moment i didn't use this approach, but sure when i do i'll update this point.
  2. Using Laravel for Back-end and Vue for Front-end: this approach separate the back-end from the front-end, and connect between them using Laravel API (this tutorial is about this approach).

Is it done? yes the npm install command, yes? ok great, let's continue...
HINT: don't worry if you got any npm WARN messages, just ignore them
Alright, it's a long journey isn't it! but it's sure deserve it, let create our first component using Vue inside Laravel Project, Yea let's do it.

Let's open our code editor and drag our project folder to it

Laravel Vue project inside sublime text 3

To find our Vue directory we're going to navigate into "/resources/js" and here we go..

Vue directory inside laravel 5.7 project

Did you see my brother we already have an example component out of the box, all we need to do it to modify it's name and it's content.

It's a good idea to give it a welcome component as a name, and make our Welcome Page with Vue Instead of Laravel .

First let's rename it, i did give it a name of: WelcomePage.vue
Then let's modify the template, so we make it say Hello, World!, the template code is in below


It was easy creating our component by modifying the ExampleComponent, now what's actually matter is to make Laravel open render this component instead of it's views.

Laravel Vue SPA


Soon...









Be sure to share it with your friends to help us provide more content, and also consider following us on social media.