Docs v1.1.0  /  Laravel + Vue.js HTML5 Angular Vue.js Laravel Rails ASP.NET Core 2 ASP.NET MVC Settings panel Layout helpers

Instructions can vary depending on whatever you use theme settings panel or not. Please select the appropriate version.

laravel-vue-starter directory structure

laravel-vue-starter
app
Console
Exceptions
Http
Controllers
Auth
ApplicationController.php
Main controller
...
Middleware
...
Providers
...
bootstrap
config
database
public
resources
assets
src
Vue.js application
components
layout
Page layouts
Layout1.vue
Layout1Flex.vue
...
router
Router config
vendor
Appwork's sources
libs
Vue components
vue-color
vue-gallery
...
styles
SCSS sources
_appwork
Appwork includes
_custom-variables
Custom variables
_theme
Theme includes
_uikit
UIKit includes
pages
Page styles
rtl
Styles with RTL support enabled
appwork.scss
appwork-material.scss
...
App.vue
entry-point.js
Webpack entry point
globals.js
Global properties and methods
...
vendor
Appwork's static assets
fonts
Iconic fonts
fontawesome.css
ionicons.css
...
js
Javascripts
layout-helpers.js
material-ripple.js
...
lang
views
application.blade.php
Main view
routes
storage
tests
vendor
package.json
webpack.mix.js
Laravel mix config
...

Third-party components

The starter project by default includes all third-party components.
Optionally you can remove unwanted components to reduce bundle size and compile time:

  1. Remove unwanted packages from the devDependencies section in the package.json file.
  2. Remove related directories within the resources/assets/src/vendor/libs directory.
  3. Remove related @imports and @includes in the resources/assets/src/vendor/styles/_theme/_libs.scss file.

For example, if you want to exclude vue-multiselect component, you will need to:

  1. Remove vue-multiselect dependency in the package.json file.
  2. Remove the resources/assets/src/vendor/libs/vue-multiselect directory.
  3. Remove @import "~@/vendor/libs/vue-multiselect/mixins";, @include vue-multiselect-theme($background, $color); and @include material-vue-multiselect-theme($background, $color); lines in the resources/assets/src/vendor/styles/_theme/_libs.scss file.

Installation

Windows
  1. Download and install Node.js 8.x from https://nodejs.org/en/.
  2. Download and install Git from https://git-scm.com/downloads.
  3. Download and install Yarn from https://yarnpkg.com/en/docs/install.
  4. Logout from the system and login again.
  5. Launch cmd.exe as administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools.
  6. Download PHP from https://windows.php.net/download. Unpack the downloaded archive into C:\php. Add C:\php to your PATH, then logout from the system and login again.
  7. Download and install Composer from https://getcomposer.org/doc/00-intro.md#installation-windows.
  8. Logout from the system and login again.
  9. Open cmd.exe and go to the laravel-vue-starter directory.
  10. Run command composer install.
  11. Rename .env.example file to .env by running ren .env.example .env.
  12. Run command php artisan key:generate.
  13. Run command yarn install.
  14. Run command npm run dev.
  15. Now you can run the server: php artisan serve
Ubuntu
  1. Upgrade system: sudo apt-get update && sudo apt-get upgrade.
  2. Install curl: sudo apt-get install curl.
  3. Install Node.js 8.x and build tools following instructions on https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions.
  4. Install Git following instructions on https://git-scm.com/download/linux.
  5. Install Yarn following instructions on https://yarnpkg.com/en/docs/install#debian-stable.
  6. Open a terminal and install PHP: sudo add-apt-repository ppa:ondrej/php; sudo apt-get update; sudo apt-get install php7.2 php-pear php7.2-curl php7.2-dev php7.2-gd php7.2-mbstring php7.2-zip php7.2-mysql php7.2-xml.
  7. Install Composer following instructions on https://getcomposer.org/download/.
  8. Make composer available globally following instructions on https://getcomposer.org/doc/00-intro.md#globally.
  9. Go to the laravel-vue-starter directory.
  10. Run command composer install.
  11. Rename .env.example file to .env by running mv .env.example .env.
  12. Run command php artisan key:generate.
  13. Run command yarn install.
  14. Run command npm run dev.
  15. Now you can run the server: php artisan serve.
Mac OS X
  1. Install Xcode from App Store. After installing, launch the Xcode, accept the license agreement and wait while components installed.
  2. Install Homebrew following instructions on https://brew.sh.
  3. Download and install Node.js 8.x from https://nodejs.org/en/.
  4. Download and install Git from https://git-scm.com/downloads.
  5. Install Yarn following instructions on https://yarnpkg.com/en/docs/install.
  6. Open a terminal.
  7. Check PHP version php -v. If PHP is not installed or PHP version is less than 7.1.3, run brew install php.
  8. Install Composer following instructions on https://getcomposer.org/download/.
  9. Make composer available globally following instructions on https://getcomposer.org/doc/00-intro.md#globally.
  10. Go to the laravel-vue-starter directory.
  11. Run command composer install.
  12. Rename .env.example file to .env by running mv .env.example .env.
  13. Run command php artisan key:generate.
  14. Run command yarn install.
  15. Run command npm run dev.
  16. Now you can run the server: php artisan serve.

Page structure

Instead of configuring the layout manually, you can use the Starter template generator. It will dramatically simplify the initial setup.

application.blade.php

resources/views/application.blade.php
<!DOCTYPE html>

<html lang="{{ app()->getLocale() }}" class="default-style">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel + Vue.js Starter</title>

    <!-- Main font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">

    <!-- Icons. Uncomment required icon fonts -->
    <!-- <link rel="stylesheet" href="{{ mix('/vendor/fonts/fontawesome.css') }}"> -->
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/ionicons.css') }}">
    <!-- <link rel="stylesheet" href="{{ mix('/vendor/fonts/linearicons.css') }}"> -->
    <!-- <link rel="stylesheet" href="{{ mix('/vendor/fonts/open-iconic.css') }}"> -->
    <!-- <link rel="stylesheet" href="{{ mix('/vendor/fonts/pe-icon-7-stroke.css') }}"> -->

    <!-- Promises -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>

    <!-- Layout helpers -->
    <script src="{{ mix('/vendor/js/layout-helpers.js') }}"></script>

</head>
<body>

    <div id="app"></div>

    <script src="{{ mix('/entry-point.js') }}"></script>

</body>
</html>
<!DOCTYPE html>

<html lang="{{ app()->getLocale() }}" class="default-style">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Laravel + Vue.js Starter</title>

    <!-- Main font -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">

    <!-- Icons. Uncomment required icon fonts -->
    <!-- <link rel="stylesheet" href="{{ mix('/vendor/fonts/fontawesome.css') }}"> -->
    <link rel="stylesheet" href="{{ mix('/vendor/fonts/ionicons.css') }}">
    <!-- <link rel="stylesheet" href="{{ mix('/vendor/fonts/linearicons.css') }}"> -->
    <!-- <link rel="stylesheet" href="{{ mix('/vendor/fonts/open-iconic.css') }}"> -->
    <!-- <link rel="stylesheet" href="{{ mix('/vendor/fonts/pe-icon-7-stroke.css') }}"> -->

    <!-- Core stylesheets -->
    <link rel="stylesheet" href="{{ mix('/vendor/css/bootstrap.css') }}" class="theme-settings-bootstrap-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/appwork.css') }}" class="theme-settings-appwork-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/theme-corporate.css') }}" class="theme-settings-theme-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/colors.css') }}" class="theme-settings-colors-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/uikit.css') }}">

    <!-- Promises -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>

    <!-- Layout helpers -->
    <script src="{{ mix('/vendor/js/layout-helpers.js') }}"></script>

    <!-- Theme settings -->
    <script src="{{ mix('/vendor/js/theme-settings.js') }}"></script>
    <script>
        // Use settings panel generator to configure the plugin
        window.themeSettings = new ThemeSettings({
            cssPath: '',
            themesPath: '',
            pathResolver: function(path) {
                var resolvedPaths = {
                    // Core stylesheets
                    //
                    @foreach (['bootstrap', 'appwork', 'colors'] as $name)
                    '{{ $name }}.css': '{{ mix("/vendor/css/{$name}.css") }}',
                    '{{ $name }}-material.css': '{{ mix("/vendor/css/{$name}-material.css") }}',
                    @endforeach

                    // UI Kit
                    'uikit.css': '{{ mix("/vendor/css/uikit.css") }}',

                    // Themes
                    //
                    @foreach (['air', 'corporate', 'cotton', 'gradient', 'paper', 'shadow', 'soft', 'sunrise', 'twitlight', 'vibrant'] as $name)
                    'theme-{{ $name }}.css': '{{ mix("/vendor/css/theme-{$name}.css") }}',
                    'theme-{{ $name }}-material.css': '{{ mix("/vendor/css/theme-{$name}-material.css") }}',
                    @endforeach
                }

                return resolvedPaths[path] || path;
            }
        });
    </script>

</head>
<body>

    <div id="app"></div>

    <script src="{{ mix('/entry-point.js') }}"></script>

</body>
</html>

Layouts

To display a page with the selected layout just define the page component as a child of the layout component.

You can find navbar, sidenav and footer components in the resources/assets/src/layout directory.

resources/assets/src/router/index.js
...

import Layout1 from '@/layout/Layout1'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: Layout1,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];
resources/assets/src/router/index.js
...

import Layout1Flex from '@/layout/Layout1Flex'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: Layout1Flex,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];
resources/assets/src/router/index.js
...

import Layout2 from '@/layout/Layout2'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: Layout2,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];
resources/assets/src/router/index.js
...

import Layout2Flex from '@/layout/Layout2Flex'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: Layout2Flex,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];
resources/assets/src/router/index.js
...

import LayoutWithoutNavbar from '@/layout/LayoutWithoutNavbar'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: LayoutWithoutNavbar,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];
resources/assets/src/router/index.js
...

import LayoutWithoutNavbarFlex from '@/layout/LayoutWithoutNavbarFlex'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: LayoutWithoutNavbarFlex,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];
resources/assets/src/router/index.js
...

import LayoutWithoutSidenav from '@/layout/LayoutWithoutSidenav'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: LayoutWithoutSidenav,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];
resources/assets/src/router/index.js
...

import LayoutHorizontalSidenav from '@/layout/LayoutHorizontalSidenav'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: LayoutHorizontalSidenav,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];
resources/assets/src/router/index.js
...

import LayoutBlank from '@/layout/LayoutBlank'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: LayoutBlank,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];

Appwork's stylesheets

To use settings panel, you need to:

  • Add Appwork's stylesheets to the Laravel Mix config (use the generator to see the example):

    webpack.mix.js
    ...
    
    // Core stylesheets
    mix.sass('resources/assets/src/vendor/styles/bootstrap.scss', 'public/vendor/css', sassOptions)
       .sass('resources/assets/src/vendor/styles/bootstrap-material.scss', 'public/vendor/css', sassOptions)
       ...
    
    // Themes
    mix.sass('resources/assets/src/vendor/styles/theme-air.scss', 'public/vendor/css', sassOptions)
       .sass('resources/assets/src/vendor/styles/theme-air-material.scss', 'public/vendor/css', sassOptions)
       ...
    
    ...
  • Remove all vendor stylesheet imports in the resources/assets/src/App.vue file.

Theming

To enable a theme, import theme SCSS file in the resources/assets/src/App.vue file.

resources/assets/src/App.vue
<style src="@/vendor/styles/theme-air.scss" lang="scss"></style>

To enable a theme just include the required theme stylesheet.

resources/views/application.blade.php
<link rel="stylesheet" href="{{ mix('/vendor/css/theme-air.css') }}" class="theme-settings-theme-css">

Material styling

To enable material styling you need to:

  1. Set material-style class on the <html> element instead of default-style.

    resources/views/application.blade.php
    <html class="material-style">
  2. Add -material suffix to bootstrap.scss, appwork.scss, theme-*.scss and colors.scss imports in the resources/assets/src/App.vue file.

    resources/assets/src/App.vue
    <style src="@/vendor/styles/bootstrap-material.scss" lang="scss"></style>
    <style src="@/vendor/styles/appwork-material.scss" lang="scss"></style>
    <style src="@/vendor/styles/theme-corporate-material.scss" lang="scss"></style>
    <style src="@/vendor/styles/colors-material.scss" lang="scss"></style>
  3. Add -material suffix to bootstrap.css, appwork.css, theme-*.css and colors.css stylesheets.

    resources/views/application.blade.php
    <link rel="stylesheet" href="{{ mix('/vendor/css/bootstrap-material.css') }}" class="theme-settings-bootstrap-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/appwork-material.css') }}" class="theme-settings-appwork-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/theme-corporate-material.css') }}" class="theme-settings-theme-css">
    <link rel="stylesheet" href="{{ mix('/vendor/css/colors-material.css') }}" class="theme-settings-colors-css">
  4. Optionally you can enable material ripple. Just append material-ripple.js script to the <head> section and call attachMaterialRippleOnLoad() function.

    resources/views/application.blade.php
    <script src="{{ mix('/vendor/js/material-ripple.js') }}"></script>
    <script>
      window.attachMaterialRippleOnLoad();
    </script>
  5. Optionally you can enable material ripple. Just append material-ripple.js script to the <head> section.

    resources/views/application.blade.php
    <script src="{{ mix('/vendor/js/material-ripple.js') }}"></script>

RTL support

To enable RTL direction support, import Appwork's SCSS files from the vendor/styles/rtl/ directory instead of vendor/styles/.

resources/assets/src/App.vue
<style src="@/vendor/styles/rtl/bootstrap.scss" lang="scss"></style>
<style src="@/vendor/styles/rtl/appwork.scss" lang="scss"></style>
<style src="@/vendor/styles/rtl/theme-corporate.scss" lang="scss"></style>
<style src="@/vendor/styles/rtl/colors.scss" lang="scss"></style>
<style src="@/vendor/styles/rtl/uikit.scss" lang="scss"></style>

To enable RTL direction support, open webpack.mix.js file and edit paths to load Appwork's stylesheets from the resources/assets/src/vendor/styles/rtl/ directory instead of resources/assets/src/vendor/styles/.

webpack.mix.js
...

// Core stylesheets
mix.sass('resources/assets/src/vendor/styles/rtl/bootstrap.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/src/vendor/styles/rtl/bootstrap-material.scss', 'public/vendor/css', sassOptions)
   ...

// Themes
mix.sass('resources/assets/src/vendor/styles/rtl/theme-air.scss', 'public/vendor/css', sassOptions)
   .sass('resources/assets/src/vendor/styles/rtl/theme-air-material.scss', 'public/vendor/css', sassOptions)
   ...

...

To enable RTL direction, add dir="rtl" attribute to the <html> element.

resources/views/application.blade.php
<html dir="rtl">

Layout options

You can configure the initial layout by setting control classes to the <html> element.

After the initial layout setup the recommended way to control layout options is layout helpers, because the helpers do some extra work, such as: setting container paddings (when navbar is fixed), performing layout animations, setting correct sidenav state classes depending on screen size etc.
resources/views/application.blade.php
<html class="layout-fixed layout-collapsed">
Control class Description
.layout-reversed Reverse layout direction without markup change.
.layout-expanded Expand layout sidenav on small screens (< 992px).
.layout-collapsed Collapse layout sidenav on large screens (>= 992px).
.layout-offcanvas Make layout sidenav offcanvas.
.layout-fixed Set layout position to fixed.
.layout-fixed-offcanvas Set layout position to fixed with offcanvas sidenav.
.layout-navbar-fixed Set layout navbar position to fixed.
.layout-footer-fixed Set layout footer position to fixed.

Generator

Use starter template generator to simplify the initial setup. Just replace a content of appropriate files with the generated code within the laravel-vue-starter directory.

Available tasks