Laravue - a sensible starting point for single-page apps

Overview

Laravue - a sensible starting point for single-page apps

Note: The vast majority of the functionality of this project has essentially been added into the Laravel Framework's scaffolding system. This project is no longer continued. See Laravel's website for more information.

Laravue

Laravue is a fork of the Laravel framework. It includes the vue js framework for the front end, and contains much of the boilerplate required for using it.

If you like this, be sure to watch this repo's package equivelent. Same features, but you can pull it in as a package!

Installing

  1. Clone the repository.
  2. CD into the repo.
  3. Run npm install. This installs all of Vue's dependencies.
  4. Run composer install. This installs all of Laravel's dependencies.
  5. Run cp .env.example .env. This enables your env files to set your app into local mode.
  6. Run php artisan key:generate. This generates a secure cipher key for encrypting your data.
  7. Run php artisan serve. This serves your application to the browser. You can also use Homestead, LAMP, WAMP, etc.
  8. In a new tab/window, run npm run watch in the same directory. This compiles your Vue resources, and automaticly runs whenever you save a file! You can also use npm run build to do a one-time build of your javascript assets.
  9. Hack something great!

Roadmap

Wondering what the plans are for Laravue? Check out this list to see where we're going with it!

  • JWT Tokens
  • Vanilla Version
  • Authentication API
  • Better documentation site
  • Lumen build for lightweight sites
  • CLI for building views and components
  • Composer tool to create new projects using laravue new project
  • Composer create-project tool for an alternative way of starting off.
  • Custom Elixir plugin to make this possible instead of npm scripts. mix.laravue('app.js').
  • Automated syncing with main Laravel repo. Right now I manually sync the fork then push to Github.
  • Async callback anonymous function for call method, basically "OK thing happened here's what I do now that it's done."

Usage

Laravue gives you a few things that may not sound like much, but are really the foundations of any app you may build:

  1. a standard way to communicate from app -> view
  2. a standard way to communicate from view -> app
  3. a standard way to communicate from components -> view
  4. a standard way to communicate from components -> app

Why would we want these features? Suppose we want to change the currentView from within a view. Right now, there’s no easy way to do that. Using my setup, we can just run @app.laravue.view ‘awesome’ .

Another example is if you want to have one user object served up from the backend that can be accessed application-wide. Just add it to the data object of your main app and it can be accessed from views using @app.user !

For more about this implementation of front-end architecture, check out this post in Laravel News

Methods (on laravue object)

view(name)

This method changes the view component's currentView to the argument you passed it. The function will automatically add -view to the end of the name you pass it. If you're using coffeescript, like I suggest, you can just run @app.laravue.view 'about' and it will take you to the about page. If not, just run this.app.laravue.view('about');.

call(view, method, args...)

This method calls a method on another view, regardless of whether or not it's already loaded. If it is loaded, Laravue goes ahead and calls it. If not, we wait for the view to be loaded, then run the function. The first argument is the name of the view that you want to have a method called on. The second one is the name of the method you want run. Any arguments after that are passed into the method as arguments using javascript magic closures! To use it, go @app.laravue.call('contacts', 'load'). If you want to pass arguments, just go @app.laravue.call('contacts', 'load', '[email protected]'). The third paramater, my email, will be passed into the load() method on the contacs-view component. For example, you might have:

module.exports =
  methods:
    load: (email) ->
      console.log email
  ready: () -> require '../view-ready.coffee'.call this # required for laravue to work
  props: ['app'] # if you want to use @app from within the view

goToAnd(view, name, args...)

goToAnd() is just a shorter way of running call() then view(). Really useful for most use case scenarios!

Creating a new element component

First, create a new file in the resources/assets/js/components directory called my-component.coffee. Put all functionality in an object which you set to module.exports. If you want HTML for this element, create a my-component.template.html in the same directory. In the object your created in the .coffee, add a template key, and set it equal to a require statement to the template file. Also, in case you're wondering, shadow DOM is not enabled, but it shouldn't be too hard to set up (no promises). Then, go to the file components.coffee. Duplicate the latest line underneath components and rename it to suite your file you just created. The key you give it will be what you instantiate it with in html, i.e. if it's my-component you use in HTML. The value should be a require statement pointing to the file. That's it, that easily can now start using your own element anywhere in your app!

Creating a new view component

To create a new view component, first create a file in resources/assets/js/views called about.coffee, replacing about with the name you want your view to have. Paste the following code into it:

module.exports =
    ready: () -> require '../view-ready.coffee'.call this
    props: ['app']

Go into components.coffee and duplicate the last line under views. Replace the relevant fields with links to your new view. Be sure to keep the -view at the end of the key! This differentiates your view from stand-alone elements. Next, go into your app.js and add the name of your view to the init method called on the laravue instance. Your view should now be up and working! To test it out, go into laravue.coffee and on line 3, change the name of currentView to be your new view, again, keep the -view. To test it out, just go into a browser and refresh!

If you have any questions just open an issue or contact me on twitter @russweas and I'll be glad to help!

Official Documentation

Documentation for the framework can be found on the Laravue website.

Contributing

Contributing is easy! Just open a Pull Request and tell me why I should accept it.

Security Vulnerabilities

If you discover a vulnerability in Laravue itself, contact me at [email protected] and open an issue.

If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell at [email protected]. All security vulnerabilities will be promptly addressed.

License

The Laravue framework is open-sourced software licensed under the MIT license. Credit to Taylor Otwell for the creation of Laravel and Evan You for the creation of Vue JS!

You might also like...
Add instagram feed to page from JSON Data
Add instagram feed to page from JSON Data

Custom Instagram Feed Add instagram feed to page from URL 🚧 Edit - As of 13th April 2021 - This code does not work. Solution is being looked into, ho

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

Cachet is a beautiful and powerful open source status page system. Overview List your service components Report incidents Customise the look of your s

Simple PHP package to get any Facebook Page posts

Get Facebook Page Feed It is simple wrapper class written in php to fetch posts from certain Facebook page. Currently I am using Facebook graph API wi

 Create and Control Page Redirects through Filament
Create and Control Page Redirects through Filament

Create and Control Page Redirects through Filament A Filament resource to create and maintain page redirects for your website. Installation You can in

📥 A simple web page to download addons through the GmodStore API.
📥 A simple web page to download addons through the GmodStore API.

📥 GmodStore Downloader In French Ce petit site Internet permet le téléchargement d'addons en provenance du GmodStore sans passer le site en ligne mai

⚡️🎨 A starting point for crafting living style guides.
⚡️🎨 A starting point for crafting living style guides.

Style-Guide-Boilerplate v3.3.2 A starting point for crafting living style guides. View Demo Note: Sample patterns have been included in the demo. Your

OpenDialog is a Conversational Experience Platform - the starting point for your own conversational applications.
OpenDialog is a Conversational Experience Platform - the starting point for your own conversational applications.

OpenDialog - open-source conversational application platform OpenDialog enables you to quickly design, develop and deploy conversational applications.

The perfect starting point to integrate Algolia within your PHP project
The perfect starting point to integrate Algolia within your PHP project

⚡️ A fully-featured and blazing-fast PHP API client to interact with Algolia.

Open Source Point of Sale is a web based point of sale application written in PHP using CodeIgniter framework.

Open Source Point of Sale is a web based point of sale application written in PHP using CodeIgniter framework. It uses MySQL as the data back end and has a Bootstrap 3 based user interface.

project with laravel 9 and php 8 and vuejs 3(modular) in both multi page and single page application

About Project Since Laravel 9 was recently released, it supports PHP 8 and above. So I decided to implement a prototype project using Laravel 9 + PHP

Laravue is a beautiful dashboard combination of Laravel, Vue.js and the UI Toolkit Element.
Laravue is a beautiful dashboard combination of Laravel, Vue.js and the UI Toolkit Element.

Laravue Laravue (pronounced /ˈlarəvjuː/) is a beautiful dashboard combination of Laravel, Vue.js and the UI Toolkit Element. The work is inspired by v

This Package helps you in laravel application to log all desired activity for each request from request entry point to generate response at a single snapshot.

Laravel Scenario Logger This Package helps you in laravel application to log all desired activity for each request from request entry point to generat

EBook-Apps - The eBook Apps is a web application that helps you browse ebooks from anywhere using your smartphone and laptop.

⚡️ eBook Apps The eBook Apps is a web application that helps you browse ebooks from anywhere using your smartphone and laptop. 🚀 Getting Started To s

Single Page Chat Application

About A single page chat application developed in PHP OOP, Mysql and AJAX. Users email (password) [email protected] (abrazzaq) [email protected] (john)

WordPress single-page theme with profile patterns.

X3P0 - Reflections A one-page user-profile WordPress theme. Really, it's just a single page. View Demo → Recommended This theme is designed to work wi

A beautiful error page for Laravel apps
A beautiful error page for Laravel apps

Ignition: a beautiful error page for Laravel apps Ignition is a beautiful and customizable error page for Laravel applications running on Laravel 5.5

 Ignition: a beautiful error page for Laravel apps
Ignition: a beautiful error page for Laravel apps

Ignition is a beautiful and customizable error page for Laravel applications running on Laravel 5.5 and newer. It is the default error page for all Laravel 6 applications.

Project template for starting a project based on the Rabble admin system.
Project template for starting a project based on the Rabble admin system.

Note: this is an experimental project and heavily under development. If you do come across this repository, and you would like to support development,

Chain Laravel jobs without having to glue it to a starting job

Laravel Job Chainer JobChainer does chain a variable amount of jobs by adding them with the add() method. This makes it possible to chain jobs without

Releases(lv0.1-alpha)
  • lv0.1-alpha(Jul 14, 2015)

Laravue is a beautiful dashboard combination of Laravel, Vue.js and the UI Toolkit Element.

Laravue Laravue (pronounced /ˈlarəvjuː/) is a beautiful dashboard combination of Laravel, Vue.js and the UI Toolkit Element. The work is inspired by v

Tuan Duong 2.1k Jan 2, 2023
Single Page Chat Application

About A single page chat application developed in PHP OOP, Mysql and AJAX. Users email (password) [email protected] (abrazzaq) [email protected] (john)

Abdul Razzaq 1 Oct 15, 2021
Aplikasi Point of Sale berbasis website menggunakan PHP native, Vanila Javascript , Bootstrap 5, Datatables dan MySQL

POS adalah sebuah aplikasi point of sale berbasis website yang dibangun menggunakan tech stack JS - PHP - MySQL.

Oka R. Abdillah 2 Feb 12, 2022
Database management in a single PHP file

Adminer - Database management in a single PHP file Adminer Editor - Data manipulation for end-users https://www.adminer.org/ Supports: MySQL, MariaDB

Jakub Vrána 5.5k Jan 8, 2023
TinyFileManager is web based file manager and it is a simple, fast and small file manager with a single file, multi-language ready web application

TinyFileManager is web based file manager and it is a simple, fast and small file manager with a single file, multi-language ready web application for storing, uploading, editing and managing files and folders online via web browser. The Application runs on PHP 5.5+, It allows the creation of multiple users and each user can have its own directory and a build-in support for managing text files with cloud9 IDE and it supports syntax highlighting for over 150+ languages and over 35+ themes.

Prasath Mani 3.5k Jan 7, 2023
Server manager is a open source project made for people so that they can add the servers to one single place irrespective of their provider and manage it through one location.

Server Manager Are you sick of having to log into hundreads of different website just to access your server? Well we got you, Server manager is a open

null 8 Aug 9, 2022
The best kernel for simple apps

Sunflower Sunflower is a super small application kernel that is used to build a dependency injection container. This kernel is useful for microservice

Tobias Nyholm 14 Aug 14, 2022
The API & platform builder, build your apps 10x faster even more, it's open source & 100% free !

The API & platform builder, build your apps 10x faster, even more. It's open source & 100% free ! Try live demo Why badaso ? 100% FREE - No need for e

Uasoft 1k Jan 2, 2023
📛 An open source status page system for everyone.

Cachet is a beautiful and powerful open source status page system. Overview List your service components Report incidents Customise the look of your s

Cachet 13k Jan 3, 2023