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.@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:
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 an 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.C:\php\php.ini and ensure extension=fileinfo line is uncommented.laravel-vue-starter directory.composer install..env.example file to .env by running ren .env.example .env.php artisan key:generate.npm install.npm run hot.npm run dev and npm run watch commands.
php artisan servesudo 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.3 php-pear php7.3-curl php7.3-dev php7.3-gd php7.3-mbstring php7.3-zip php7.3-mysql php7.3-xml.php.ini and ensure extension=mbstring line is uncommented.laravel-vue-starter directory and run command composer install..env.example file to .env by running mv .env.example .env.php artisan key:generate.npm install.npm run hot.npm run dev and npm run watch commands.
php artisan serve.php -v. If PHP is not installed or PHP version is less than 7.3.0, install Homebrew (https://brew.sh) and then run brew install php.laravel-vue-starter directory and run command composer install..env.example file to .env by running mv .env.example .env.php artisan key:generate.npm install.npm run hot.npm run dev and npm run watch commands.
php artisan serve.application.blade.phpresources/views/application.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="light-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') }}"> -->
<!-- Layout helpers -->
<script src="{{ mix('/vendor/js/layout-helpers.js') }}"></script>
<!-- IE10 polyfills (remove if you don't plan to support IE10) -->
<script>
if (navigator.userAgent.match('MSIE 10.0;')) {
document.write(
'<script src="https:\/\/cdn.polyfill.io\/v2\/polyfill.min.js?features=Intl.~locale.en"><\/script>');
}
</script>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('/entry-point.js') }}"></script>
</body>
</html><!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="light-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') }}">
<!-- 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") }}',
'{{ $name }}-dark.css': '{{ mix("/vendor/css/{$name}-dark.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") }}',
'theme-{{ $name }}-dark.css': '{{ mix("/vendor/css/theme-{$name}-dark.css") }}',
@endforeach
}
return resolvedPaths[path] || path;
}
});
</script>
<!-- IE10 polyfills (remove if you don't plan to support IE10) -->
<script>
if (navigator.userAgent.match('MSIE 10.0;')) {
document.write('<script src="https:\/\/cdn.polyfill.io\/v2\/polyfill.min.js?features=Intl.~locale.en"><\/script>');
}
</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)
.sass('resources/assets/src/vendor/styles/bootstrap-dark.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)
.sass('resources/assets/src/vendor/styles/theme-air-dark.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 $enable-material-style variable to true.
resources/assets/src/vendor/styles/_custom-variables/_features.scss
...
$enable-material-style: true;
...Set material-style class on the <html> element instead of light-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 dark styling you need to:
Set $enable-dark-style variable to true.
resources/assets/src/vendor/styles/_custom-variables/_features.scss
...
$enable-dark-style: true;
...Set dark-style class on the <html> element instead of light-style.
resources/views/application.blade.php
<html class="dark-style">
Add -dark 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-dark.scss" lang="scss"></style>
<style src="@/vendor/styles/appwork-dark.scss" lang="scss"></style>
<style src="@/vendor/styles/theme-corporate-dark.scss" lang="scss"></style>
<style src="@/vendor/styles/colors-dark.scss" lang="scss"></style>Add -dark 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-dark.css') }}" class="theme-settings-bootstrap-css">
<link rel="stylesheet" href="{{ mix('/vendor/css/appwork-dark.css') }}" class="theme-settings-appwork-css">
<link rel="stylesheet" href="{{ mix('/vendor/css/theme-corporate-dark.css') }}" class="theme-settings-theme-css">
<link rel="stylesheet" href="{{ mix('/vendor/css/colors-dark.css') }}" class="theme-settings-colors-css">To enable RTL direction support, first of all, you need to set $enable-rtl-support variable to true.
resources/assets/src/vendor/styles/_custom-variables/_features.scss
$enable-rtl-support: true;
...
Then 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>
Then 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)
.sass('resources/assets/src/vendor/styles/rtl/bootstrap-dark.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)
.sass('resources/assets/src/vendor/styles/rtl/theme-air-dark.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.
When you execute composer install, the error occurs: ... requires ext-fileinfo * -> the requested PHP extension fileinfo is missing from your system.
php --ini;extension=fileinfo with extension=fileinfoOfficial Laravel upgrade guide: https://laravel.com/docs/8.x/upgrade.
Check the PHP version php -v. Upgrade it if the version is less than 7.3.0.
Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)
Changes within app/ directory:
app/User.php is moved to app/Models/User.php. Diff
app/Http/Middleware/CheckForMaintenanceMode.php is renamed to PreventRequestsDuringMaintenance.php. Diff
New app/Http/Middleware/TrustHosts.php. Copy this file from appwork-v1_6_0/laravel-vue-starter/app/Http/Middleware/
app/Exceptions/Handler.php. Diff
app/Http/Middleware/RedirectIfAuthenticated.php. Diff
app/Http/Middleware/TrustProxies.php. Diff
app/Http/Kernel.php. Diff
app/Providers/AuthServiceProvider.php. Diff
app/Providers/EventServiceProvider.php. Diff
app/Providers/RouteServiceProvider.php. Diff
Changes within config/ directory:
config/app.php. Diff
config/auth.php. Diff
config/broadcasting.php. Diff
config/cache.php. Diff
config/cors.php. Diff
config/filesystems.php. Diff
config/hashing.php. Diff
config/logging.php. Diff
config/mail.php. Diff
config/queue.php. Diff
config/session.php. Diff
config/view.php. Diff
Changes within database/ directory:
database/seeds/DatabaseSeeder.php is moved to database/seeders/ directory. Diff
New database/migrations/XXXX_XX_XX_XXXXXX_create_password_resets_table.php migration.
database/factories/UserFactory.php. Diff
database/migrations/2019_08_19_000000_create_failed_jobs_table.php. Diff
Other changes:
Remove webpack.config.js file.
.env. Diff
package.json. Diff
composer.json. Diff
webpack.mix.js. Diff
routes/channels.php. Diff
routes/console.php. Diff
routes/web.php. Diff
Copy with replace all SCSS files within resources/assets/src/vendor/styles/ and resources/assets/src/vendor/styles/rtl/ directories:
resources/assets/src/vendor/styles/*.scss resources/assets/src/vendor/styles/rtl/*.scss
Copy with replace changed files and directories:
.gitignore .styleci.yml phpunit.xml public/index.php resources/assets/src/style.scss resources/assets/src/vendor/styles/_appwork/ resources/assets/src/vendor/styles/_uikit/ resources/assets/src/vendor/libs/nouislider/ resources/assets/src/vendor/libs/sidenav/ resources/assets/src/vendor/libs/vue-multiselect/ resources/assets/src/vendor/libs/vue-plyr/ resources/assets/src/vendor/libs/vue-simple-calendar/ resources/assets/src/vendor/libs/vuejs-datepicker/ resources/assets/vendor/fonts/ resources/assets/vendor/js/
Remove composer.lock
Execute composer install
Remove node_modules directory and package-lock.json. Then execute npm install
Changes in third-party components:
vue-simple-calendar changed its API and configuration. See diff/1_6_0/vue_CuiVueSimpleCalendar-vue.html
For more info see https://github.com/richardtallent/vue-simple-calendar/blob/main/CHANGELOG.md#500-2020-09-04.
Copy with replace the next files and directories:
resources/assets/src/vendor/styles/_appwork/_functions.scss resources/assets/src/vendor/libs/vue-flatpickr-component/ resources/assets/src/vendor/libs/vue-input-tag/ resources/assets/src/vendor/libs/vue-multiselect/ resources/assets/src/vendor/libs/vue-notification/ resources/assets/src/vendor/libs/vue-plyr/ resources/assets/src/vendor/libs/vue-slider-component/ resources/assets/src/vendor/libs/vuejs-datepicker/
Add plyr package to your package.json:
{
...,
"dependencies": {
...
"plyr": "~3.5.6",
...
},
...
}
Copy with replace the next file:
resources/assets/src/vendor/libs/vue-flatpickr-component/flatpickr.scss
Official Laravel upgrade guide: https://laravel.com/docs/7.x/upgrade.
Check the PHP version php -v. Upgrade it if the version is less than 7.2.5.
Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)
Note: Yarn package manager is not reqired anymore.
All authentication scaffolding has been moved to the laravel/ui repository, see https://laravel.com/docs/7.x/upgrade#authentication-scaffolding. Remove:
app/Http/Controllers/Auth/ database/migrations/2014_10_12_100000_create_password_resets_table.php
Remove the next files and directories:
tests/Bootstrap.php resources/assets/src/vendor/styles/migrate/ resources/assets/src/vendor/libs/plyr/
Copy new files and directories:
config/cors.php resources/assets/src/vendor/libs/vue-plyr/ resources/assets/src/vendor/styles/_custom-variables/_appwork-dark.scss resources/assets/src/vendor/styles/_custom-variables/_features.scss
Copy with replace all SCSS files within resources/assets/src/vendor/styles/ and resources/assets/src/vendor/styles/rtl/ directories:
resources/assets/src/vendor/styles/*.scss resources/assets/src/vendor/styles/rtl/*.scss
Copy with replace changed files and directories:
.styleci.yml phpunit.xml resources/assets/vendor/fonts/fontawesome/ resources/assets/vendor/fonts/fontawesome.css resources/assets/vendor/js/ resources/assets/src/style.scss resources/assets/src/vendor/styles/_appwork/ resources/assets/src/vendor/styles/_theme/ resources/assets/src/vendor/styles/_uikit/ resources/assets/src/vendor/styles/pages/ resources/assets/src/vendor/libs/c3/ resources/assets/src/vendor/libs/nouislider/ resources/assets/src/vendor/libs/perfect-scrollbar/ resources/assets/src/vendor/libs/sidenav/ resources/assets/src/vendor/libs/spinkit/ resources/assets/src/vendor/libs/sweet-modal-vue/ resources/assets/src/vendor/libs/theme-settings/ resources/assets/src/vendor/libs/v-img/ resources/assets/src/vendor/libs/vue-awesome-swiper/ resources/assets/src/vendor/libs/vue-color/ resources/assets/src/vendor/libs/vue-context-menu/ resources/assets/src/vendor/libs/vue-data-tables/ resources/assets/src/vendor/libs/vue-dropzone/ resources/assets/src/vendor/libs/vue-flatpickr-component/ resources/assets/src/vendor/libs/vue-form-wizard/ resources/assets/src/vendor/libs/vue-gallery/ resources/assets/src/vendor/libs/vue-input-tag/ resources/assets/src/vendor/libs/vue-jstree/ resources/assets/src/vendor/libs/vue-multiselect/ resources/assets/src/vendor/libs/vue-notification/ resources/assets/src/vendor/libs/vue-number-input-spinner/ resources/assets/src/vendor/libs/vue-password-strength-meter/ resources/assets/src/vendor/libs/vue-quill-editor/ resources/assets/src/vendor/libs/vue-simple-calendar/ resources/assets/src/vendor/libs/vue-simplemde/ resources/assets/src/vendor/libs/vue-slider-component/ resources/assets/src/vendor/libs/vue-toasted/ resources/assets/src/vendor/libs/vuejs-datepicker/
Update:
.env.example. Diff
composer.json. Diff
package.json. Diff
webpack.mix.js. Diff
resources/assets/src/entry-point.js. Diff
resources/assets/src/globals.js. Diff
resources/assets/src/main.js. Diff
resources/assets/src/vendor/styles/_custom-variables/_libs.scss. Diff
resources/assets/src/vendor/styles/_custom-variables/_pages.scss. Diff
resources/assets/src/vendor/styles/_custom-variables/_uikit.scss. Diff
app/Exceptions/Handler.php. Diff
app/Http/Middleware/RedirectIfAuthenticated.php. Diff
app/Http/Kernel.php. Diff
app/Providers/RouteServiceProvider.php. Diff
config/app.php. Diff
config/auth.php. Diff
config/database.php. Diff
config/filesystems.php. Diff
config/logging.php. Diff
config/mail.php. Diff
config/session.php. Diff
config/view.php. Diff
database/migrations/2014_10_12_000000_create_users_table.php. Diff
database/migrations/2019_08_19_000000_create_failed_jobs_table.php. Diff
resources/lang/en/passwords.php. Diff
resources/lang/en/validation.php. Diff
routes/api.php. Diff
routes/channels.php. Diff
routes/console.php. Diff
routes/web.php. Diff
tests/Unit/ExampleTest.php. Diff
If you're using multi-theming setup (with ThemeSettings plugin enabled), you need to update your webpack.mix.js. Use Starter template generator.
Edit variables in the resources/assets/src/vendor/styles/_custom-variables/_features.scss file according your setup.
| Variable | Feature |
|---|---|
$enable-rtl-support |
Set to true to enable RTL mode support, otherwise set to false. |
$enable-light-style |
Set to true to enable light (previously default) style support, otherwise set to false. |
$enable-material-style |
Set to true to enable material style support, otherwise set to false. |
$enable-dark-style |
Set to true to enable dark style support, otherwise set to false. |
Remove composer.lock
Execute composer install
Remove node_modules directory and then execute npm install
theme-default class is renamed to theme-light.
[Before] resources/views/layouts/application.blade.php
<html lang="{{ app()->getLocale() }}" class="default-style">[After] resources/views/layouts/application.blade.php
<html lang="{{ app()->getLocale() }}" class="light-style">If you need IE10 support, add the next code to the end of the head block.
resources/views/layouts/application.blade.php
<script>
if (navigator.userAgent.match('MSIE 10.0;')) {
document.write('<script src="https:\/\/cdn.polyfill.io\/v2\/polyfill.min.js?features=Intl.~locale.en"><\/script>');
}
</script>ThemeSettings plugin settings are changed. Use Settings Panel Generator to get updated settings.
ThemeSettings.setMaterial() method is removed.
Added ThemeSettings.setStyle(), ThemeSettings.isLightStyle(),
ThemeSettings.isMaterialStyle(), ThemeSettings.isDarkStyle() methods.
See Settings panel docs.
New style-dependent utility classes, which change its color depending on the current active style:
.theme-text-white - White (light or material style) / dark (dark style) text..theme-text-dark - Dark (light or material style) / white (dark style) text..theme-bg-white - White (light or material style) / dark (dark style) background..theme-bg-dark - Dark (light or material style) / white (dark style) background..theme-border-white - White (light or material style) / dark (dark style) border..theme-border-dark - Dark (light or material style) / white (dark style) border.
If you're using splash screen, edit router.afterEach callback in the
resources/assets/src/router/index.js:
Before
// Remove initial splash screen
const splashScreen = document.querySelector('.app-splash-screen')
if (splashScreen) {
splashScreen.style.opacity = 0
setTimeout(() => splashScreen && splashScreen.parentNode.removeChild(splashScreen), 300)
}After
// Remove initial splash screen
const splashScreen = document.querySelector('.app-splash-screen')
if (splashScreen) {
splashScreen.style.opacity = 0
setTimeout(() =>
splashScreen && splashScreen.parentNode && splashScreen.parentNode.removeChild(splashScreen)
, 300)
}Changes in third-party components:
plyr package is replaced with vue-plyr, see https://github.com/redxtech/vue-plyr.
vue-awesome-swiper changed its exports.
Before
import { swiper, swiperSlide } from 'vue-awesome-swiper'After
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'spinkit classes are changed. See https://github.com/tobiasahlin/SpinKit
Server requirements for Laravel 6 was changed, see https://laravel.com/docs/6.x/installation#server-requirements. Upgrade your environment regarding this list.
Official upgrade guide: https://laravel.com/docs/6.x/upgrade.
(Optional) Upgrade Node.js to 10.16 LTS and Yarn
Copy with replace changed files and directories:
resources/assets/src/vendor/styles/_appwork/ resources/assets/src/vendor/libs/c3/ resources/assets/src/vendor/libs/nouislider/ resources/assets/src/vendor/libs/sidenav/ resources/assets/src/vendor/libs/vue-flatpickr-component/ resources/assets/src/vendor/libs/vue-quill-editor/ resources/assets/src/vendor/libs/vue-simplemde/ resources/assets/vendor/fonts/fontawesome/ resources/assets/vendor/fonts/fontawesome.css resources/assets/vendor/fonts/ionicons/ resources/assets/vendor/fonts/ionicons.css resources/assets/vendor/fonts/linearicons/ resources/assets/vendor/js/
(Optional) Copy new default "Not Found" page:
resources/assets/src/components/NotFound.vue.resources/assets/src/router/index.js. Diff Copy new files:
.styleci.yml tests/Bootstrap.php database/migrations/2019_08_19_000000_create_failed_jobs_table.php
Update:
.editorconfig. Diff
.gitignore. Diff
composer.json. Diff
package.json. Diff
phpunit.xml. Diff
webpack.mix.js. Diff
webpack.config.js. Diff
app/Http/Kernel.php. Diff
app/Http/Middleware/TrustProxies.php. Diff
config/broadcasting.php. Diff
config/cache.php. Diff
config/database.php. Diff
config/filesystems.php. Diff
config/hashing.php. Diff
config/mail.php. Diff
config/queue.php. Diff
config/services.php. Diff
database/.gitignore. Diff
database/factories/UserFactory.php. Diff
resources/lang/en/passwords.php. Diff
resources/lang/en/validation.php. Diff
resources/assets/src/entry-point.js. Diff
resources/assets/src/globals.js. Diff
resources/assets/src/style.scss. Diff
composer.lock.composer install.yarn upgrade.npm run dev.Some changes in Bootstrap-Vue (See full list on https://bootstrap-vue.js.org/docs/misc/changelog):
b-toast component.:variant and :solid options have no effect, use :toastClass instead.b-table's inner <table> element use :table-class instead of :class.b-table's slot syntax was changed:
Before:
<template slot="title" slot-scope="data">
{{data.item.title}}
</template>
After:
<template v-slot:cell(title)="data">
{{data.item.title}}
</template>
b-modal's inner .modal element use modal-class= instead of class=.:state behaviour was changed, pass true for success state and false for error state.b-popover's and b-tooltip's inner .popover and .tooltip elements use custom-class= instead of class=.b-tooltip's markup was changed. See laravel-vue-demo/resources/assets/src/components/ui/TooltipsAndPopovers.vue for example.Changes in third-party components:
vue-simplemde package is changed. Replace require('vue-simplemde/src/markdown-editor').default with require('vue-simplemde/src/index').default.(Optional) Upgrade Node.js to 10.15 LTS and Yarn
Copy new files and directories:
webpack.config.js resources/assets/src/vendor/styles/migrate/
Copy with replace all SCSS files within resources/assets/src/vendor/styles/ and resources/assets/src/vendor/styles/rtl/ directories:
resources/assets/src/vendor/styles/*.scss resources/assets/src/vendor/styles/rtl/*.scss
Copy with replace changed files and directories:
resources/assets/vendor/fonts/ resources/assets/vendor/js/ resources/assets/src/vendor/styles/_appwork/ resources/assets/src/vendor/styles/_theme/ resources/assets/src/vendor/styles/_uikit/_social.scss resources/assets/src/vendor/styles/pages/clients.scss resources/assets/src/vendor/styles/pages/messages.scss resources/assets/src/vendor/libs/mega-dropdown/ resources/assets/src/vendor/libs/nouislider/ resources/assets/src/vendor/libs/plyr/ resources/assets/src/vendor/libs/sidenav/ resources/assets/src/vendor/libs/vue-awesome-swiper/ resources/assets/src/vendor/libs/vue-flatpickr-component/ resources/assets/src/vendor/libs/vue-miltiselect/ resources/assets/src/vendor/libs/vue-quill-editor/ resources/assets/src/vendor/libs/vue-simple-calendar/ resources/assets/src/vendor/libs/vue-simplemde/ resources/assets/src/vendor/libs/vue-slider-component/ resources/assets/src/vendor/libs/vue-toasted/ resources/assets/src/vendor/libs/vuejs-datepicker/
Update:
package.json. Diff
webpack.mix.js. Diff
resources/views/application.blade.php. Diff
resources/assets/src/entry-point.js. Diff
resources/assets/src/globals.js. Diff
resources/assets/src/style.scss. Diff
Find and replace all occurences of "baseUrl" with "publicUrl" within
resources/assets/src
directory
Execute yarn upgrade
(Optional) Upgrade Laravel framework:
Update:
composer.json. Diff
phpunit.xml. Diff
app/Http/Controllers/Auth/RegisterController.php. Diff
app/Providers/AuthServiceProvider.php. Diff
app/User.php. Diff
config/app.php. Diff
config/auth.php. Diff
config/cache.php. Diff
config/database.php. Diff
config/logging.php. Diff
config/mail.php. Diff
config/queue.php. Diff
config/services.php. Diff
config/session.php. Diff
database/factories/UserFactory.php. Diff
database/migrations/2014_10_12_000000_create_users_table.php. Diff
resources/lang/en/passwords.php. Diff
resources/lang/en/validation.php. Diff
Remove composer.lock
composer installBootstrap CSS:
Import migration SCSS file in resources/assets/src/style.scss:
@import '~@/vendor/styles/migrate/appwork-130';
Changed classes:
.font-weight-thin → .font-weight-lighter
.text-dark → .text-body
.bg-none → .bg-transparent
.font-sans-serif → .text-sans-serif
.font-serif → .text-serif
.font-monospace → .text-monospace
.box-shadow-none → .shadow-none
.container-m--x → .container-m-nx
.container-m--y → .container-m-ny
.btn-round → .rounded-pill
Negative horizontal margins:
.m{sides}--{size} → .m{sides}-n{size}
.m{sides}-{breakpoint}--{size} → .m{sides}-{breakpoint}-n{size}
Bootstrap-Vue:
Add custom-controls-stacked class to all <b-check-group stacked> elements
Prop horizontal of <b-form-group> is deprecated, use
label-cols-{size} instead.
See examples: vue-demo/src/cui-components/CuiForms.vue
Components changed:
vuedraggable. See https://github.com/SortableJS/Vue.Draggable/blob/master/documentation/migrate.md
Replace
import draggable from 'vuedraggable'with
import draggable from 'vuedraggable/src/vuedraggable'vue-gallery doesn't support IE10 anymore, see fallback examples:
vue-demo/src/cui-components/CuiVueGallery.vue
vue-input-tag. See https://github.com/matiastucci/vue-input-tag
vue-slider-component. See See https://nightcatsama.github.io/vue-slider-component/#/api/props
vue-toasted changed default toast class from primary to
toasted-primary, see
vue-demo/src/cui-components/CuiVueToasted.vue
Note: Validation icons are disabled by default. To enable it, add the next
variable in the resources/assets/src/vendor/styles/_custom-variables/_appwork.scss
and
resources/assets/src/vendor/styles/_custom-variables/_appwork-material.scss:
$enable-validation-icons: true;Update package.json. Diff
Remove node_modules directory
Execute yarn install
Execute npm run dev
Update .env. Diff
Update .gitignore. Diff
Update phpunit.xml. Diff
Update composer.json. Diff
Update app/Http/Controllers/Auth/RegisterController.php. Diff
Update app/Http/Kernel.php. Diff
Update app/Http/Middleware/VerifyCsrfToken.php. Diff
Update app/Providers/EventServiceProvider.php. Diff
Update app/User.php. Diff
Update bootstrap/app.php. Diff
Update config/app.php. Diff
Update config/cache.php. Diff
Update config/database.php. Diff
Update config/hashing.php. Diff
Update config/logging.php. Diff
Update config/mail.php. Diff
Update config/queue.php. Diff
Update config/services.php. Diff
Update config/session.php. Diff
Update config/view.php. Diff
Update database/factories/UserFactory.php. Diff
Update database/migrations/2014_10_12_000000_create_users_table.php. Diff
Update resources/lang/en/validation.php. Diff
Update storage/framework/cache/.gitignore. Diff
Update tests/CreatesApplication.php. Diff
Copy new files and directories:
app/Http/Controllers/Auth/VerificationController.php app/Http/Middleware/Authenticate.php app/Http/Middleware/CheckForMaintenanceMode.php public/web.config storage/logs/ storage/framework/cache/data/ .editorconfig
Execute composer install
Execute yarn install
Execute npm run dev
Update composer.json. Diff
Update package.json. Diff
Update webpack.mix.js. Diff
Update resources/assets/src/entry-point.js. Diff
Update resources/assets/src/globals.js. Diff
Update resources/assets/src/main.js. Diff
Update resources/assets/src/style.scss. Diff
Copy with replace changed files and directories:
resources/assets/vendor/js/ resources/assets/vendor/fonts/fontawesome/ resources/assets/vendor/fonts/ionicons/ resources/assets/vendor/fonts/fontawesome.css resources/assets/vendor/fonts/ionicons.css resources/assets/src/vendor/libs/vue-gallery/ resources/assets/src/vendor/libs/vue-simplemde/ resources/assets/src/vendor/libs/vue-toasted/ resources/assets/src/vendor/libs/mega-dropdown/mega-dropdown.js resources/assets/src/vendor/libs/sidenav/sidenav.js resources/assets/src/vendor/libs/spinkit/spinkit.scss resources/assets/src/vendor/libs/vue-dropzone/vue-dropzone.scss resources/assets/src/vendor/libs/vue-multiselect/vue-multiselect.scss resources/assets/src/vendor/libs/vuejs-datepicker/vuejs-datepicker.scss resources/assets/src/vendor/styles/_appwork/_accordion.scss resources/assets/src/vendor/styles/_appwork/_breadcrumb.scss resources/assets/src/vendor/styles/_appwork/_buttons.scss resources/assets/src/vendor/styles/_appwork/_close.scss resources/assets/src/vendor/styles/_appwork/_custom-forms.scss resources/assets/src/vendor/styles/_appwork/_mixins.scss resources/assets/src/vendor/styles/_appwork/_switcher.scss resources/assets/src/vendor/styles/_appwork/_variables-material.scss resources/assets/src/vendor/styles/_appwork/_variables.scss resources/assets/src/vendor/styles/colors-material.scss
Update your code regarding breaking changes:
vue-simple-calendar component has breaking changes. See https://github.com/richardtallent/vue-simple-calendar/blob/master/CHANGELOG.md#breaking-changes
vue-cropper and vue-c3 packages are not supported anymore
Execute composer install
Execute yarn install
Execute npm run dev