laravel-vue-starter
directory structure
The starter project by default includes all third-party components.
Optionally you can remove unwanted components to reduce bundle size and compile time:
devDependencies
section in the package.json
file.resources/assets/src/vendor/libs
directory.@import
s and @include
s 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:
vue-multiselect
dependency in the package.json
file.resources/assets/src/vendor/libs/vue-multiselect
directory.@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.
cmd.exe
as administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools
.C:\php
. Add C:\php
to your PATH
, then logout from the system and login again.cmd.exe
and go to the laravel-vue-starter
directory.composer install
..env.example
file to .env
by running ren .env.example .env
.php artisan key:generate
.yarn install
.npm run dev
.php artisan serve
sudo apt-get update && sudo apt-get upgrade
.sudo apt-get install curl
.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
.laravel-vue-starter
directory.composer install
..env.example
file to .env
by running mv .env.example .env
.php artisan key:generate
.yarn install
.npm run dev
.php artisan serve
.php -v
. If PHP is not installed or PHP version is less than 7.1.3, run brew install php
.laravel-vue-starter
directory.composer install
..env.example
file to .env
by running mv .env.example .env
.php artisan key:generate
.yarn install
.npm run dev
.php artisan serve
.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>
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 LayoutBlank from '@/layout/LayoutBlank'
...
const router = new Router({
...
routes: [{
...
}, {
path: '/page',
component: LayoutBlank,
children: [{
path: '',
component: () => import('@/components/Page')
}]
}, {
...
}]
...
];
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)
...
...
resources/assets/src/App.vue
file.
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">
To enable material styling you need to:
Set material-style
class on the <html>
element instead of default-style
.
resources/views/application.blade.php
<html class="material-style">
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>
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">
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>
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>
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">
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">
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. |
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.