Skip to content
Laravel, Vue, TypeScript Start Template for full stack development
PHP TypeScript HTML Vue
Branch: master
Clone or download
Latest commit 3efe3f3 Dec 3, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
.hooks
app
bootstrap
config
database Initial commit Oct 20, 2019
public
resources
routes
storage Initial commit Oct 20, 2019
tests Initial commit Oct 20, 2019
.babelrc Initial commit Oct 20, 2019
.editorconfig
.env.example Added readme Dec 2, 2019
.gitattributes Initial commit Oct 20, 2019
.gitignore Added finishing touches Dec 2, 2019
.prettierignore Initial commit Oct 20, 2019
.prettierrc.yml
.styleci.yml Initial commit Oct 20, 2019
.travis.yml Removed vendor from travis cache Dec 3, 2019
LICENSE
artisan Initial commit Oct 20, 2019
babel.config.js Initial commit Oct 20, 2019
composer.json Added readme Dec 2, 2019
composer.lock
docker-compose.yml Added finishing touches Dec 2, 2019
package-lock.json Updated installation instructions Dec 3, 2019
package.json Added finishing touches Dec 2, 2019
phpunit.xml Initial commit Oct 20, 2019
postcss.config.js Initial commit Oct 20, 2019
readme.md Update readme Dec 3, 2019
server.php Initial commit Oct 20, 2019
tsconfig.json
tslint.json Initial commit Oct 20, 2019
webpack.mix.js Added finishing touches Dec 2, 2019

readme.md

Laravel + Vue + TypeScript Starter Project (MPA)

build status total downloads latest stable version license

Starter project template of full stack web development

Demo

Screenshots of a demo application that uses this template

The live demo can be found here. The repo for the demo can be found here

Splash Page Screenshot Login Page Screenshot Login GIF

Features

  • Laravel 6.6
  • Vue.js 2.5
  • TypeScript
  • Vuetify (Material Design)
  • Reusable dialog
  • NProgress on axios request
  • Hooks
  • Vuex (with secure storage)

Installation

With composer

$ composer create-project --prefer-dist chinloyal/lavuet ProjectName
$ cd ProjectName
$ npm install
$ npm run dev

From github

$ git clone https://github.com/chinloyal/lavuet.git ProjectName
$ cd ProjectName
$ composer install
$ npm install
$ npm run dev
$ cp .env.example .env
$ php artisan key:generate

Usage

Development

$ npm run watch # build and watch
$ npm run hot # serve with hot reload

Production

$ npm run prod

App Dialog

Firstly include the AppDialog component in your main layout blade file. Now you can use the dialog from any component by accessing $dialog on your vue instance.

Example

// Snippet of code
deleteItem() {
    this.$dialog.show({
        title: 'Confirm Delete',
        message: 'Are you sure you want to delete this item?',
        showCancelBtn: true,
        onConfirm() {
            // Delete item
        }
    })
}

Available Options on the app dialog

showCancelBtn?: boolean;
cancelBtnText?: string;
okBtnText?: string;
title: string;
message: string;
visible?: boolean;
dialogType?: string;
onConfirm?: Function;

'?' Means optional

Secure Storage

If you have need to store data in local storage simply use the utility provided in the utils folder.

import { SecureStorage } from '@/utils/secure-storage';
const storage = SecureStorage.getInstance();

storage.set('key', 'value');

It uses localStorage but encrypts the data stored so it cannot be accessed from the console.

NB: In your .env file for laravel set MIX_APP_SECRET=my-secret-key with a strong key.

Hooks

Hooks allow you to enforce rules before you push, commit or even install a package. There are a few hooks prebuilt you can use in the .hooks folder. For example you can enforce the use of npm over yarn and vice versa in the configure.js file. Next simply run the hook from your package.json preinstall script by adding "preinstall": "node .hooks/frontend/configure.js".

Other things that can be enforced are branch names, how up to date the branch is with another branch and even linting.

Note

  • This is not an SPA.
  • You can use vuetify components in blade files
You can’t perform that action at this time.