Material ripple
Splash screen
RTL support
RTL mode
Theme settings panel
PAGE LAYOUT
LAYOUT OPTIONS
{{option[1]}}
Fixed navbar
Fixed footer
Reversed
Collapsed sidenav
THEME
NAVBAR BG
{{option}}
SIDENAV BG
{{option}}
FOOTER BG
{{option}}
Laravel + Vue.js Starter
{% if settingsPanel -%}
{% endif %} {% if materialRipple %} {% endif %} {%- if materialRipple and not settingsPanel -%} {% endif %} {% if pageLayout != 'blank' or settingsPanel %} {% endif %} {% if settingsPanel %} {% endif %} {% if splashScreen %}
CompanyName
{% endif %}
const mix = require('laravel-mix'); const glob = require('glob') const path = require('path') /* |-------------------------------------------------------------------------- | Aliases |-------------------------------------------------------------------------- */ mix.webpackConfig({ resolve: { alias: { '@': path.join(__dirname, 'resources/assets/src'), 'node_modules': path.join(__dirname, 'node_modules') } } }) /* |-------------------------------------------------------------------------- | Vendor assets |-------------------------------------------------------------------------- */ function mixAssetsDir(query, cb) { (glob.sync('resources/assets/' + query) || []).forEach(f => { f = f.replace(/[\\\/]+/g, '/'); cb(f, f.replace('resources/assets', 'public')); }); } const sassOptions = { precision: 5 }; {% if settingsPanel -%} // Core stylesheets mix.sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/bootstrap.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/bootstrap-material.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/appwork.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/appwork-material.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/colors.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/colors-material.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/uikit.scss', 'public/vendor/css', sassOptions); // Themes mix.sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-air.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-air-material.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-corporate.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-corporate-material.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-cotton.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-cotton-material.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-gradient.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-gradient-material.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-paper.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-paper-material.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-shadow.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-shadow-material.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-soft.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-soft-material.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-sunrise.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-sunrise-material.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-twitlight.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-twitlight-material.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-vibrant.scss', 'public/vendor/css', sassOptions) .sass('resources/assets/src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-vibrant-material.scss', 'public/vendor/css', sassOptions); {%- endif %} // Core javascripts mixAssetsDir('vendor/js/**/*.js', (src, dest) => mix.scripts(src, dest)); // Fonts mixAssetsDir('vendor/fonts/*.css', (src, dest) => mix.copy(src, dest)); mixAssetsDir('vendor/fonts/*/*', (src, dest) => mix.copy(src, dest)); /* |-------------------------------------------------------------------------- | Entry point |-------------------------------------------------------------------------- */ mix.js('resources/assets/src/entry-point.js', 'public'); mix.version();
import layoutHelpers from '@/layout/helpers.js' {% if settingsPanel -%} import themeSettings from '@/vendor/libs/theme-settings/theme-settings.js' {%- endif %} export default function () { return { // Layout helpers layoutHelpers, {% if settingsPanel -%} // Theme settings themeSettings, {%- endif %} // Check for RTL layout get isRTL () { return document.documentElement.getAttribute('dir') === 'rtl' || document.body.getAttribute('dir') === 'rtl' }, // Check if IE get isIE () { return typeof document['documentMode'] === 'number' }, // Check if IE10 get isIE10 () { return this.isIE && document['documentMode'] === 10 }, // Layout navbar color get layoutNavbarBg () { {% if settingsPanel -%} return this.themeSettings.getOption('navbarBg') || '{{navbarBg}}' {%- else -%} return '{{navbarBg}}' {%- endif %} }, // Layout sidenav color get layoutSidenavBg () { {% if settingsPanel -%} return this.themeSettings.getOption('sidenavBg') || '{{sidenavBg}}' {%- else -%} return '{{sidenavBg}}' {%- endif %} }, // Layout footer color get layoutFooterBg () { {% if settingsPanel -%} return this.themeSettings.getOption('footerBg') || '{{footerBg}}' {%- else -%} return '{{footerBg}}' {%- endif %} }, // Animate scrollTop scrollTop (to, duration, element = document.scrollingElement || document.documentElement) { if (element.scrollTop === to) return const start = element.scrollTop const change = to - start const startDate = +new Date() // t = current time; b = start value; c = change in value; d = duration const easeInOutQuad = (t, b, c, d) => { t /= d / 2 if (t < 1) return c / 2 * t * t + b t-- return -c / 2 * (t * (t - 2) - 1) + b } const animateScroll = () => { const currentDate = +new Date() const currentTime = currentDate - startDate element.scrollTop = parseInt(easeInOutQuad(currentTime, start, change, duration)) if (currentTime < duration) { requestAnimationFrame(animateScroll) } else { element.scrollTop = to } } animateScroll() } } }
import Vue from 'vue' import Router from 'vue-router' import Meta from 'vue-meta' import globals from '@/globals' // Layouts import {{layoutClass(pageLayout)}} from '@/layout/{{layoutClass(pageLayout)}}' Vue.use(Router) Vue.use(Meta) const router = new Router({ base: '/', mode: 'history', routes: [{ path: '/', component: {{layoutClass(pageLayout)}}, children: [{ path: '', component: () => import('@/components/Home') }, { path: 'page-2', component: () => import('@/components/Page2') }] }] }) router.afterEach(() => { {% if splashScreen -%} // Remove initial splash screen const splashScreen = document.querySelector('.app-splash-screen') if (splashScreen) { splashScreen.style.opacity = 0 setTimeout(() => splashScreen && splashScreen.parentNode.removeChild(splashScreen), 300) } {% endif -%} // On small screens collapse sidenav if (window.layoutHelpers && window.layoutHelpers.isSmallScreen() && !window.layoutHelpers.isCollapsed()) { setTimeout(() => window.layoutHelpers.setCollapsed(true, true), 10) } // Scroll to top of the page globals().scrollTop(0, 0) }) router.beforeEach((to, from, next) => { // Set loading state document.body.classList.add('app-loading') // Add tiny timeout to finish page transition setTimeout(() => next(), 10) }) export default router
{% if not settingsPanel -%} {%- endif %}