PHPackages                             j0hnys/vista - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. j0hnys/vista

ActiveProject[Utility & Helpers](/categories/utility)

j0hnys/vista
============

A laravel package for developing Client UI using Iview, Vue

v0.2.0.0(5y ago)260[3 PRs](https://github.com/j0hnys/vista/pulls)MITPHP

Since Jul 11Pushed 4y agoCompare

[ Source](https://github.com/j0hnys/vista)[ Packagist](https://packagist.org/packages/j0hnys/vista)[ RSS](/packages/j0hnys-vista/feed)WikiDiscussions master Synced today

READMEChangelogDependencies (3)Versions (10)Used By (0)

vista
=====

[](#vista)

A laravel UI generator following Domain Driven Design (DDD) and Test Driven Development (TDD) principles using Vue, iView

Introduction
============

[](#introduction)

The purpose of this package is to generate a web UI for a laravel application using laravel's models, migrations and validations (Form Request Validation).

The package generates a Single Page Application (SPA) and functionality through custom artisan commands which generate code. It uses vue js and iView UI Toolkit as a foundation.

**video introduction at:**

Application architecture
------------------------

[](#application-architecture)

### Preface

[](#preface)

The main design principles behind the SPA architecture is to set a thin client structure which communicates with the server through restful API's. It wants to promote the notion that the front-end should be for presentation only, leaving the back-end to do the heavy lifting. This is the main reason for a simple routing and menu architecture. The code generators that are provided follow this simplicity.

### Folder structure

[](#folder-structure)

The package on install creates among others the following folder structure

```
|* public_*
    |- css
    |- js
    |->.htaccess
    |->favicon.ico
    |->index.php
    |->robots.txt
|* resources_*
    |- client_app
        |- application
            |- api
            |->router.js
            |->router.pages.js
            |->router.submenus.js
            |->store.js
            |->store.pages.js
        |- infrastructure
            |- autoload
            |- plugins
            |- type_checker
            |->app.js
            |->app.vue
            |->bootstrap.js
        |- presentation
            |- components
            |- constants
            |- mixins
            |- models
            |- pages
            |- stores
            |- styles
            |- tests
    |- views
        |->iview.blade.php

```

Where `|* public_*` and `|* resources_*` are the SPA's directories in the root folder of a laravel application. Every component is stateless and every page implements the main content and handles storage. Vue page component data can be type checked as can all other inputs, more details are seen in Strict Types section below.

This package supports multiple SPA's from one laravel instance. For example we could have a pair `|* public_front_end`, `|* resources_front_end` and `|* public_back_end`, `|* resources_back_end` that work in parallel with the same controllers, models, e.t.c. just by configuring webpack.mix.js accordingly. This is described in more detail at the installation section below.

The general workflow for adding a new page follows the following pattern:

- creating a vue component in the `pages` folder
- updating the `router.pages.js` with this new vue component
- updating the `router.js` with this new vue component
- updating the `store.pages.js` with this new vue component
- updating the `store.js` with this new vue component
- updating the `main_menu.js` in order to have a visual route to the new page

The main layout of a SPA is presented in the image below

[![main_layout](images/main_menu_sub_menu_(edited).png)](images/main_menu_sub_menu_(edited).png)

There are four menu levels split in main menu and sub menus. Main menu is at the left sidebar and is the same for every page, it can facilitate two levels. Sub menu's are defined in the router and presented above the content and can facilitate another two levels. There is also place for notifications and user account menus in the top right corner.

As of now an automated CRUD functionality is provided by code generation. It creates three pages (`*Create.vue`, `*ListDelete.vue`, `*Update.vue`) at the `pages` folder which correspond to viewing and deleting and creating, updating records to the database from a specific model. For every page it is assumed that there is a resource (restful CRUD from laravel). For example `UserCreate.vue` assumes that there is a resource named `user`. Endpoint uris can be set when creating the pages. In the images below this functionality is presented.

List/Delete:

[![list_delete](images/list_delete.png)](images/list_delete.png)

Create/Update:

[![create_update](images/create_update.png)](images/create_update.png)

installation
============

[](#installation)

to add to a laravel project as a package
----------------------------------------

[](#to-add-to-a-laravel-project-as-a-package)

`composer require j0hnys/vista`

add

```
"dependencies": {
    "hello-type": "2.24.5",
    "view-design": "^4.0.0",
    "iview-loader": "^1.3.0",
    "vue": "^2.6.11",
    "vue-router": "^2.8.1",
    "vuex": "^3.1.3",
    "vuex-persistedstate": "2.5.4"
}
```

to laravel's `package.json` and then execute `npm install`

After publishing the configuration of this package (`php artisan vendor:publish`) the configuration can be found at `config/vista.php`. Below there is a snippet of that file

```