Creation of Laravel + Vue project from the scratch

Laravel is a framework for backend in PHP quite popular and robust with lot’s and lot’s of features that provides an easy way into building a project, from login, to CRUD, MVC, HTTP’s response, Log checking and others. Is quite a powerfull tool in the hands of the right men.

Vue on it’s part is the new cool way of writing react code, why vue instead of react, well, Vue creator can explain it best, but it’s easier , more understandable and way more comfortable to re utilize and learn.

This is a step by step, to create a laravel vue project template to start your own project. I made it for myself and company i work for, so we could have this on the wiki and get a nice soft start in any new project.

So let’s start it.

Stuff we need to install:

You can ignore some part’s if it’s not of your interest.

• Homebrew : Package Manager for macOS (or Linux) , we will need it if doing it so on mac.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

• Php 7.3, for laravel 8.0 , check your php version and install it
• to check if it’s okay use : $ php -v

# Linux Debian System.
sudo add-apt-repository ppa:ondrej/php
sudo apt-get update
sudo apt-get install php7.3
# Mac OS , we will use homebrew for it.
brew install php@7.3

• Composer : A tool for dependency management in PHP.

curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer
chmod +x /usr/local/bin/composer

• Check if it’s working and self-update

composer
sudo composer self-update

• Laravel: PHP web application framework

composer global require laravel/installer

• Npm/Node.js : Node package manager and JavaScript runtime engine. install it from the website: https://nodejs.org/en/.
• check if it’s working after install

npm -v
node -v

• Yarn: A improved package manager for npm repositories.

npm install -g yarn

• Install the vue cli; it’s a globally installed npm package that will provide the vue command in your terminal.

yarn global add @vue/cli @vue/cli-service-global

• Add to your .bashrc , .profile, .zshrc or other the paths for the composer and yarn.

export PATH="/Your/Path/To/.composer/vendor/bin:$PATH"

export PATH="/Your/Path/To/.yarn/bin:$PATH"

Now onto creating the Project

• Create a dir and go into into “$ mkdir projects && cd projects”
• Create the laravel project:

composer create-project --prefer-dist laravel/laravel

• go into it, and create the vueapp.

cd laravel
# here i like to into the resources or do it onto the root of the laravel folder.
cd resources
vue create vueapp

• on the vue last command terminal will ask you to choose some settings do on your preferences. ( i like vue3, babel and eslint)

Running the project

• Use artisan to serve the laravel part, in the root of the project.

php artisan serve

• Go onto the yarn , where you installed the project and yarn serve.

cd resources
yarn serve 

Conclusions

The work environment experience set’s up this way of doing things to try and keep up your project the most organized as possible. With this Template Structure the laravel and the vue parts are strictly separate and organized so you can meddle with your fun dev stuff easily.

Good luck and have fun