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

OTHER

Settings panel Layout helpers

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.

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

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.

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.

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>

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.

• Layout 1
• Layout 1 (Flex)
• Layout 2
• Layout 2 (Flex)
• Without navbar
• Without navbar (Flex)
• Without sidenav
• Horizontal sidenav
• Blank

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')
    }]
  }, {
    ...
  }]

  ...
];

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>

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>

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">

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

resources/views/application.blade.php

<html class="layout-fixed layout-collapsed">