LaravelLaravel & VueJsVueJs

7 Open source projects built with Laravel and Vue.js

Previous page 1 2 3 4 5 6 7Next page
[/vc_column_text][/vc_column][/vc_row]

6- /spa-starter-kit

A highly opinionated starter kit for building Single Page Applications with Laravel and Vue.js

highly opinionated Single Page Application starter kit built on top of Vue.js and Laravel.

This package contains two separate projects to act as a starting point for a Single Page Application: a Vue.js project (created with vue-cli + webpack template) and a Laravel 5.3 project.

They’re not just freshly created projects but a fully working application that can be modified and expanded to become your own application.

Demo

The live demo can be found in https://spa.codecasts.rocks/.



Features

  1. Client side
    • Vue.js 2.0 project create with vue-cli + webpack template
    • Centralized state management with Vuex
    • Route management with Vue-router
    • Authentication with JWT
    • Keep user signed in using local stored info
    • HTTP requests with Axios
    • ESLint with AirBNB preset
    • Pagination integrated with Laravel’s LengthAwarePaginator
    • Alerts and Confirmation Alerts provided by SweetAlert
  2. Server side

Prerequisites

Make sure you have installed Node and Yarn (latest versions) as well as PHP 7 and MySQL.

Installation

Cloning

These commands will download the repository and prepare it for you.

git clone --depth 1 -b master git@github.com:codecasts/spa-starter-kit.git
cd spa-starter-kit
rm -rf ./.git/
git init
git add --all
git commit -m "init"

Setup

  1. Client side – this is a Vue.js project created with vue-cli
    • With Terminal cd client && yarn && yarn run dev.
  2. Server side – this is a Laravel 5.3 project
    • With Terminal:
      • Navigate to webservice folder and then:
      • composer install to install Laravel and third party packages
      • touch database/database.sqlite to create an empty database file
      • cp .env.example .env to configure installation
      • php artisan key:generate to generate unique key for the project
      • php artisan jwt:secret to generate unique key for the project
      • php artisan migrate to create all the tables
      • php artisan db:seed to fill the tables with fake data
      • php artisan serve to serve application on localhost:8000
★ READ ALSO ★  Posts search and gallery view app in Vuejs

Usage

  1. Client side
  2. Server side
    • API endpoint is http://localhost:8000/api


Previous page 1 2 3 4 5 6 7Next page
Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close