LaravelLaravel & VueJsVueJs

7 Open source projects built with Laravel and Vue.js

Laravel VueJS is today’s main topic. Laravel is PHP’s fastest growing Framework with its ease of use, scalability, and flexibility. VueJS is the fastest growing Front end Library in Javascript community. Laravel is providing VueJS support out of the box. So let us get started.

1 – /koel

A personal music streaming server that works. https://koel.phanan.net



Introduction

Koel (also styled as koel, with a lowercase k) is a simple web-based personal audio streaming service written in Vue at the client side and Laravel on the server side. Targeting web developers, Koel embraces some of the more modern web technologies – flexbox, audio and drag-and-drop API to name a few – to do its job.

Requirements

Koel has two components, each with its own set of requirements:

Server

  • All requirements by Laravel – PHP, OpenSSL, composer and such. Consider setting PHP’s memory_limit to a good value (512M or better) if you have a big library.
  • MySQL or MariaDB. Actually, any DBMS supported by Laravel should work.
  • NodeJS latest stable with yarn

Client

  • Any decent web browser will do – Koel has been tested on Chrome 47, Firefox 42, Safari 8, Opera 34, and Edge.

Installation

From your console, run the following commands:

cd PUBLIC_DIR
git clone https://github.com/phanan/koel.git .
git checkout v3.7.0 # Check out the latest version at https://github.com/phanan/koel/releases
composer install
php artisan koel:init # Populate credentials during the process

php artisan serve

You should now be able to visit http://localhost:8000 in your browser and start using Koel.

If you’re on Debian, here’s an unofficial installation guide. This may or may not be out of date, so use it with your own risk.

If you want more control, edit .env file. There’s quite a few settings there to tweak Koel to your needs.



2 – /Cachet

:name_badge: An open source status page system for everyone. https://cachethq.io

Cachet Created with Sketch.


Cachet is a beautiful and powerful open source status page system.

Overview

  • List your service components
  • Report incidents
  • Customise the look of your status page
  • Markdown support for incident messages
  • A powerful JSON API
  • Metrics
  • Multi-lingual
  • Subscriber notifications via email
  • Two factor authentication

Requirements

  • PHP 5.6.4+ or newer
  • HTTP server with PHP support (eg: Apache, Nginx, Caddy)
  • Composer
  • A supported database: MySQL, PostgreSQL or SQLite
★ READ ALSO ★  Ethereum Classic - Historical Market Data + 163 Currencies in Realtime

Installation, Upgrades and Documentation

You can find documentation at https://docs.cachethq.io.

Here are some useful quick links:

Demo

To test out the demo, you may login to the Dashboard with the following:

  • Username: test or test@test.com
  • Password: test123

The demo resets every 30 minutes.



3- /vuedo

Vuedo is a blog platform, built with Laravel and Vue.js. https://vuejsfeed.com

What is Vuedo?

Vuedo is an open source project built with Laravel and Vue.js. It is a live example of how everything works together.

Website using Vuedo in production : https://vuejsfeed.com

Vue.js Feed is a place where News, Tutorials, Plugins, Showcases and more things regarding Vue are handpicked and shared with the community.



Basic Features:

  • Manage posts and media
  • Categorize posts
  • User Roles
  • Content moderation
  • Markdown Editor
  • Amazon S3 integration
  • and more…

Installation

Download this repo.

Rename .env.example to .env and fill the options.

Run the following commands:

composer install
npm install
php artisan key:generate
php artisan migrate
php artisan db:seed
gulp
php artisan serve

If you are making changes to JavaScript or Styles make sure you run gulp watch.



4 – /blog

:star2:

 PJ Blog is an open source blog built with Laravel and Vue.js. https://www.pigjian.com

 

 

This is a powerful blog, I try to build the blog more beautiful, more convenient.

Laravel 5.* and Vuejs 2.* combined with the establishment of a good response and quickly dashboard, the dashboard made through the Vuejs component development.

I believe it will be better and better. If you are interested in this, you can join and enjoy it.

Here is documents

Example

 



Basic Features

  • Manage users, articles, discussions and media
  • Statistical tables
  • Categorize articles
  • Label classification
  • Content moderation
  • Own comments system
  • Multi-language switching
  • Markdown Editor
  • and more…

PJ Blog Laravel 5.*

Server Requirements

  • PHP >= 7.0.0
  • Node >= 6.x
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Mbstring PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension

Install

1. Clone the source code or create new project.

git clone https://github.com/jcc/blog.git

OR

composer create-project jcc/blog

2. Set the basic config

cp .env.example .env

Edit the .env file and set the database and other config for the system after you copy the .env.example file.

2. Install the extended package dependency.

Install the Laravel extended repositories:

composer install -vvv

Install the Vuejs extended repositories:

npm install

Compile the js code:

npm run dev

// OR

npm run watch

// OR

npm run production

3. Run the blog install command, the command will run the migrate command and generate test data.

php artisan blog:install


5-  /dashboard.spatie.be

The source code of dashboard.spatie.be https://murze.be/2017/06/building-rea…

 

 



Configured dashboard has following tiles:

  • Twitter stream with all tweets mentioning and quoting @spatie_be
  • Team calendar via Google Calendar
  • Music currently playing via Last.fm
  • Clock/date/weather
  • Team todo’s via GitHub files
  • Packagist downloads
  • NPM downloads
  • Internet up/down via WebSockets

How it works

Freek Van der Herten gave a talk on the dashboard at Laracon EU where he explained how the dashboard works behind the screens. The talk was recorded and published on Youtube.

Installation

Install this package by running cloning this repository and install like you normally install Laravel.

  • Run composer install and npm install yarn
  • Run yarn and yarn run dev to generate assets
  • Copy .env.example to .env and fill your values (php artisan key:generate, database, pusher values etc)
  • Run php artisan migrate --seed, this will seed a user based on your BASIC_AUTH .env values
  • Start your queue listener and setup the Laravel scheduler.
  • Open the dashboard in your browser, login and wait for the update events to fill the dashboard.


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

Usage

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


7- /voten

The code that powers voten.co https://voten.co



Voten.co is a real-time social bookmarking for the 21st century. It’s real-time, beautiful, customizable yet simple. To get a quick taste of what Voten is written with please check our credits page.

Software Stack

Voten is a Laravel application that runs on the following software:

  • Ubuntu 16.04.2 LTS
  • Nginx 1.10+
  • MySQL 5.7+ (to use mariaDB, you must modify json type migration columns to blob by running sed -i 's/json(/binary(/g' * inside the database/migrations/ directory in Linux)
  • PHP 7.1+
  • Redis 3.0+
  • Git 2.8.4+
  • Pusher (we use laravel-echo-server on production server)
  • Algolia Search

To install all the required stack on a server, we recommend an auto-installation service such as CodePier.

Installation Steps

After cloning the repository, first create a .env from the example file:

cp .env.example .env

Open “.env” file with your desired editor and enter your services info. Now run below commands:

composer install
php artisan key:generate
php artisan migrate
php artisan passport:install
npm install
npm run production

Create admin user

To create an admin user, run the below command from the root of the project

php artisan db:seed --class=AdminUserSeeder

The login details for the admin user is admin and password.

After running the seeder, be sure to clear your redis cache, you should now be able to navigate to /backend



Tags

7 thoughts on “7 Open source projects built with Laravel and Vue.js”

Leave a Reply

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

Close
%d bloggers like this: