Building a Vue SPA With Laravel

Building a Vue SPA With Laravel

Laravel 5.7 + Vue + Vue Router = SPA .The reason to mention the version of Laravel is to avoid confusion because time to time the folder structure of Laravel might be changed.

Prerequisite

  1. Fundamental of Laravel
  2. Fundamental of Vue
  3. Fundamental of VueRouter

1. Install Laravel

composer global require "laravel/installer"

This command allows you to install the Laravel installer, so you can create a new laravel project easily in the future.

Once it completed downloaded. Enter the following command.

laravel new <any-projects-name-you-want>

You just have to wait until it completes to download.

1.1 Remove preset scaffolding Optional

This is the optional step.

We are not using the scaffolding in this tutorial. Therefore, I am going to remove it to keep the folder structure as neat as possible.

Simply enter the command below.

php artisan preset none

After removing the scaffolding, remember to run npm install to install all the dependencies.

Thanks to John LeVan

2. Install Vue, VueRouter and Vuetify

npm install vue vue-router vuetify

By enter this command, Vue, Vue Router and Vuetify will be downloaded into your node_modules folder.

3. Create app.blade.php

Rename welcome.blade.php to app.blade.php under resources/views directory.

Remove the code and tweak it like the screenshot below.

The reason to do so is to keep your code simple and clean.

We included Vuetify CSS because we will be using it later. You can find the the code easily from here.

You need to add <meta> of CSRF. Axios need to fetch the CSRF from the meta and insert it into Axios header. If you don’t do so, you are not allow to submit your form by using POST method.

You can get the line of code from this Laravel CSRF.

4. Modify Laravel routes

Go to routes/ directory and open the web.php.

Replace the default with the code below.

Route::get('/{any}', '[email protected]')->where('any', '.*');

Without this line of code in the web.php, your Vue Router can’t work properly.

5. Create Controller

After updating the web.php file, we need to create a SinglePageControllerto handle the route.

Go to your terminal and enter the command below:

php artisan make:controller SinglePageController

You will see the controller are created under app/Http/Controllers/ directory.

Open the SinglePageController.php file and add the line of codes below into the class.

public function index() {
    return view('app');
}


6. Modify app.js

Open your app.js file under resources/js/ and tweak the script as screenshot below.

I prefer to use import for my own preferences.

Read this post from Stack Overflow if you want to know more about import and require

If you run npm run watch now, you will receive an error message from the Toast.

This is because we still haven’t create the routes.js and App.vue.

7. Structure the js directory

We have to create some folders into the resources/js/ directory.

Although we are not using the folder now, but I always keep this as a habit when I am setting up for SPA by using Laravel.

We are creating a layouts, pages, views and stores folder. By right, I also need to create a routes folder but I will skip this for now in this tutorial.

8. Setup Vue Components

We need to create some components now.

Let’s create Home.vue and About.vue under resources/js/components/ directory.

You can delete the ExampleComponent.vue component if you want to. Since we are not using it.

We just need to create a very simple template here.

And now, we need to create App.vue under resources/js/views/. This would be the main file that used to render those files which fall under those directories which we created earlier.

You might find these HTML tags are very complex. You can ignore them for now because those HTML tags are used for Vuetify.

The most important part of the scripts is the <router-view>. This is where you see your content of the component.

If you npm run watch, you will realize the error about App.vue is missing. This is because we have created the file.

9. Setup Vue Router

We need to create a route in order for us to navigate.

You will need to create a routes.js file under resources/js/ directory.

Then you just need to input the code as shown below.

As you can see we import the components we created earlier under resources/js/components/

If you compile the file by enter the command of npm run watch now, you will receive an error, because the compiler does not understand what does the @ used for.

10. Setup webpack.mix.js

Let’s go to webpack.mix.js at your root directory.

We need to define the @ in order to tell the compiler what does the @ uses for.

After adding the alias in webpack.mix.js, then the compiler would understand the @ is represent resources/.

Why we want to do so? In the future your directory might have a lot of levels. This is to save your time to typing ../ instead you just need to type @.

Now, re-run your npm run watch again.

Because your compiler need to re-compile the webpack you adjusted in order to understand the alias.

You will see this in a while.

11. Let’s run and see the result.

Let run the command below, php artisan serve

By doing so, your website is now live on your localhost, [[http://localhost:8000](http://localhost:8000)](http://localhost:8000](http://localhost:8000) "http://localhost:8000](http://localhost:8000)").

Some of you might ask why I want to post the screenshot but not sharing the code.

Well, simply because I want all of you to code by yourself and memorize it.

I hope you enjoy my tutorial.

30s ad

Vuejs 2 + Vuex + Firebase + Cloud Firestore

Building Applications with VueJs, Vuex, VueRouter, and Nuxt

Ethereum and Solidity: Build Dapp with VueJS

Learn Web Development Using VueJS

Curso de VueJS 2

Vuejs 2 + Vuex con TypeScript Nivel PRO

Curso de Vuejs 2, Cognito y GraphQL

10 Best Vue Icon Component For Your Vue.js App

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

Icons are the vital element of the user interface of the product enabling successful and effective interaction with it. In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

1. Animated SweetAlert Icons for Vue

A clean and simple Vue wrapper for SweetAlert's fantastic status icons. This wrapper is intended for users who are interested in just the icons. For the standard SweetAlert modal with all of its bells and whistles, you should probably use Vue-SweetAlert 2

Demo: https://vue-sweetalert-icons.netlify.com/

Download: https://github.com/JorgenVatle/vue-sweetalert-icons/archive/master.zip

2. vue-svg-transition

Create 2-state, SVG-powered animated icons.

Demo: https://codesandbox.io/s/6v20q76xwr

Download: https://github.com/kai-oswald/vue-svg-transition/archive/master.zip

3. Vue-Awesome

Awesome SVG icon component for Vue.js, with built-in Font Awesome icons.

Demo: https://justineo.github.io/vue-awesome/demo/

Download: https://github.com/Justineo/vue-awesome/archive/master.zip

4. vue-transitioning-result-icon

Transitioning Result Icon for Vue.js

A scalable result icon (SVG) that transitions the state change, that is the SVG shape change is transitioned as well as the color. Demonstration can be found here.

A transitioning (color and SVG) result icon (error or success) for Vue.

Demo: https://transitioning-result-icon.dexmo-hq.com/

Download: https://github.com/dexmo007/vue-transitioning-result-icon/archive/master.zip

5. vue-zondicons

Easily add Zondicon icons to your vue web project.

Demo: http://www.zondicons.com/icons.html

Download: https://github.com/TerryMooreII/vue-zondicons/archive/master.zip

6. vicon

Vicon is an simple iconfont componenet for vue.

iconfont
iconfont is a Vector Icon Management & Communication Platform made by Alimama MUX.

Download: https://github.com/Lt0/vicon/archive/master.zip

7. vue-svgicon

A tool to create svg icon components. (vue 2.x)

Demo: https://mmf-fe.github.io/vue-svgicon/v3/

Download: https://github.com/MMF-FE/vue-svgicon/archive/master.zip

8. vue-material-design-icons

This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project. It also includes some CSS that helps make the scaling of the icons a little easier.

Demo: https://gitlab.com/robcresswell/vue-material-design-icons

Download: https://gitlab.com/robcresswell/vue-material-design-icons/tree/master

9. vue-ionicons

Vue Icon Set Components from Ionic Team

Design Icons, sourced from the Ionicons project.

Demo: https://mazipan.github.io/vue-ionicons/

Download: https://github.com/mazipan/vue-ionicons/archive/master.zip

10. vue-ico

Dead easy, Google Material Icons for Vue.

This package's aim is to get icons into your Vue.js project as quick as possible, at the cost of all the bells and whistles.

Demo: https://material.io/resources/icons/?style=baseline

Download: https://github.com/paulcollett/vue-ico/archive/master.zip

I hope you like them!

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown.

The 10 Vue markdown components below will give you a clear view.

1. Vue Showdown

Use showdown as a Vue component.

View Demo

Download Source

2. showdown-markdown-editor

A markdown editor using codemirror and previewer using showdown for Vue.js.

View Demo

Download Source

3. markdown-it-vue

The vue lib for markdown-it.

View Demo

Download Source

4. perfect-markdown

perfect-markdown is a markdown editor based on Vue & markdown-it. The core is inspired by the implementation of mavonEditor, so perfect-markdown has almost all of the functions of mavonEditor. What's more, perfect-markdown also extends some features based on mavonEditor.

View Demo

Download Source

5. v-markdown-editor

Vue.js Markdown Editor component.

View Demo

Download Source

6. markdown-to-vue-loader

Markdown to Vue component loader for Webpack.

View Demo

Download Source

7. fo-markdown-note Component for Vue.js

fo-markdown-note is a Vue.js component that provides a simple Markdown editor that can be included in your Vue.js project.

fo-markdown-note is a thin Vue.js wrapper around the SimpleMDE Markdown editor JavaScript control.

View Demo

Download Source

8. Vue-SimpleMDE

Markdown Editor component for Vue.js. Support both vue1.0 & vue2.0

View Demo

Download Source

9. mavonEditor

A nice vue.js markdown editor. Support WYSIWYG editing mode, reading mode and so on.

View Demo

Download Source

10. vue-markdown

A Powerful and Highspeed Markdown Parser for Vue.

View Demo

Download Source

Thank for read!

Collection of 15 Vue Input Component for Your Vue.js App

Collection of 15 Vue Input Component for Your Vue.js App

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.

1. Maska
  • No dependencies
  • Small size (~2 Kb gziped)
  • Ability to define custom tokens
  • Supports repeat symbols and dynamic masks
  • Works on any input (custom or native)

Demo

Download


2. v-range-flyout

A vue component that wraps a input type=number with a customizable range slider flyout with 2-way binding.

Demo

Download


3. vue-tel-input

International Telephone Input with Vue.

Demo

Download


4. Restricted Input

Allow restricted character sets in input elements.

Features

  • Disallow arbitrary characters based on patterns
  • Maintains caret position
  • Format/Update on paste
  • Works in IE11+

Demo

Download


5. Vue Currency Input

The Vue Currency Input plugin allows an easy input of currency formatted numbers.

Demo

Download


6. vue-fields

Input components for vue.js.

Demo

Download


7. vue-material-input

Simple example of issue I am seeing with input labels.

Demo

Download


8. vue-tribute

A Vue.js wrapper for Zurb's Tribute library for native @mentions.

Demo

Download


9. vue-number-smarty

Number input with rich functionality for Vue.js.

Features

  • integer/float
  • signed/unsigned
  • step size
  • increment/decrement value by scrolling when focused
  • align variants
  • min and max boundaries
  • max length of integer part (only for float type)
  • max length of float part (only for float type)
  • max length of string
  • error state
  • readonly state
  • theme options

Demo

Download


10. Vue input mask

Super tiny input mask library for vue.js based on PureMask.js (~2kb) exposed as directive. No dependencies.

Demo

Download


11. vue-r-mask

mask directive for vue.js

  • Template similar to javascript regular expression. /\d{2}/
  • Directive useful for your own input or textarea.
  • Arbitrary number of digits in template /\d{1,10}/

Demo

Download


12. Vue IP

An ip address input with port and material design support.

Demo

Download


13. v-money Mask for Vue.js

Tiny input/directive mask for currency

Features

  • Lightweight (<2KB gzipped)
  • Dependency free
  • Mobile support
  • Component or Directive flavors
  • Accept copy/paste
  • Editable

Demo

Download


14. Vue Masked Input

Dead simple masked input component for Vue.js 2.X. Based on inputmask-core.

Demo

Download


15. VueJS input component

Mobile & Desktop friendly VueJS input component
Features used
CSS variables
Vue's transition-group
Flexbox

Demo


I hope you like them!