Vue Starter Template Generator - Appwork v1.6.0 Docs

Material ripple

Splash screen

RTL support

RTL mode

Theme settings panel

Light style

Material style

Dark style

PAGE LAYOUT

LAYOUT OPTIONS

Fixed navbar

Fixed footer

Reversed

Collapsed sidenav

THEME

NAVBAR BG

SIDENAV BG

FOOTER BG

const path = require('path')
{%- if settingsPanel %}
const RenameWebpackPlugin = require('rename-webpack-plugin')
const SuppressChunksPlugin = require('suppress-chunks-webpack-plugin').default
const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const STYLES = {
  {%- for fileName in ['appwork', 'bootstrap', 'colors'] -%}{% for styleName in styles %}
  'vendor/{{fileName}}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}': './src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/{{fileName}}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.scss',
  {%- endfor %}{% endfor %}
  'vendor/uikit': './src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/uikit.scss',
  {%- for themeName in ['air', 'corporate', 'cotton', 'gradient', 'paper', 'shadow', 'soft', 'sunrise', 'twitlight', 'vibrant'] -%}{% for styleName in styles %}
  'vendor/theme-{{themeName}}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}': './src/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-{{themeName}}{% if styleName == 'material' %}-material{% elif styleName == 'dark' %}-dark{% endif %}.scss'{% if not loop.last %},{% endif %}
  {%- endfor %}{% if not loop.last %},{% endif %}{% endfor %}
}
{% endif %}

module.exports = {
  transpileDependencies: [
    /\bbootstrap-vue\b/,
    /\bvuejs-datepicker\b/,
    /\bvue-echarts\b/,
    /\bresize-detector\b/,
    /\bvue-c3\b/,
    /\bvue-masonry\b/,
    /\bvue-cropper\b/,
    /\bvuedraggable\b/,
    /\bdropzone\b/,
    /\bmarked\b/,
    /\bvue-plyr\b/,
    /\bswiper\b/,
    /\bdom7\b/
  ],
  chainWebpack: config => {
    // Add "node_modules" alias
    config.resolve.alias
      .set('node_modules', path.join(__dirname, './node_modules'))

{% if settingsPanel -%}
    // Add styles to entry points
    Object.keys(STYLES).forEach(k => {
      config.entry(k)
        .add(STYLES[k])
    })
    {%- endif %}

// Disable "prefetch" plugin since it's not properly working in some browsers
    config.plugins
      .delete('prefetch')

{% if settingsPanel -%}
    // Do not inject "vendor" assets
    config.plugin('html')
      .tap(args => {
        args[0].excludeAssets = [/[/\\]vendor[/\\]/]
        return args
      })
    {%- endif %}

// Do not remove whitespaces
    config.module.rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.whitespace = 'preserve'
        return options
      })

{%- if settingsPanel %}

// Add exclude assets plugin
    config.plugin('html-exclude-assets')
      .use(HtmlWebpackExcludeAssetsPlugin)

// Non-production config
    if (process.env.NODE_ENV !== 'production') {
      // Exclude vendor styles (except page styles) from the default SCSS rule
      config.module.rule('scss')
        .test(/^(?!.*?vendor[/\\]styles[/\\]).*?\.scss$|vendor[/\\]styles[/\\]pages[/\\].*?\.scss$/)

// Create a rule for handling vendor styles. Do not include page styles
      config.module.rule('vendor-css')
        .test(/^.*?vendor[/\\]styles[/\\](?!.*?pages[/\\]).*?\.scss$/)
        .use('extract-css-loader').loader(MiniCssExtractPlugin.loader).options({
          publicPath: '../'
        }).end()
        .use('css-loader').loader('css-loader').options({
          sourceMap: false,
          importLoaders: 2
        }).end()
        .use('postcss-loader').loader('postcss-loader').options({
          sourceMap: false
        }).end()
        .use('sass-loader').loader('sass-loader').options({
          sourceMap: false
        })

// Add extract-vendor-css plugin
      config.plugin('extract-vendor-css')
        .use(MiniCssExtractPlugin, [{
          filename: 'css/[name].css',
          chunkFilename: 'css/[name].css'
        }])

// Production config
    } else {
      // Do not generate .js files for stylesheets
      config.plugin('suppress-chunks')
        .use(SuppressChunksPlugin, [
          Object.keys(STYLES),
          { filter: /\.js(?:\.map)?$/ }
        ])

// Rename vendor styles to remove hashes from their names
      config.plugin('rename-chunks')
        .use(RenameWebpackPlugin, [{
          originNameReg: /(appwork(?:-material|-dark)?|bootstrap(?:-material|-dark)?|colors(?:-material|-dark)?|uikit|theme-[^.]+)\..*?\.css$/,
          targetName: '$1.css'
        }])
    }{%- endif %}
  }
}

<!DOCTYPE html>

<html lang="en"{% if rtlMode %} dir="rtl"{% endif %} class="{{style}}-style{% if pageLayout != 'blank' and layoutPosition %} layout-{{layoutPosition}}{% endif %}{% if reversedLayout %} layout-reversed{% endif %}{% if collapsedSidenav %} layout-collapsed{% endif %}{% if fixedNavbar %} layout-navbar-fixed{% endif %}{% if fixedFooter %} layout-footer-fixed{% endif %}">
  <head>
    <title>Vue Starter</title>

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

<link rel="stylesheet" href="<%= BASE_URL %>vendor/fonts/ionicons.css">

{% if settingsPanel -%}
    
    <link rel="stylesheet" href="<%= BASE_URL %>css/vendor/bootstrap{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.css" class="theme-settings-bootstrap-css">
    <link rel="stylesheet" href="<%= BASE_URL %>css/vendor/appwork{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.css" class="theme-settings-appwork-css">
    <link rel="stylesheet" href="<%= BASE_URL %>css/vendor/theme-{{theme}}{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.css" class="theme-settings-theme-css">
    <link rel="stylesheet" href="<%= BASE_URL %>css/vendor/colors{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.css" class="theme-settings-colors-css">
    <link rel="stylesheet" href="<%= BASE_URL %>css/vendor/uikit.css">
    {% endif %}

{% if materialRipple %}
    
    <script src="<%= BASE_URL %>vendor/js/material-ripple.js"></script>
    {% endif %}
    {%- if materialRipple and not settingsPanel -%}
    <script>window.attachMaterialRippleOnLoad();</script>
    {% endif %}

<script src="<%= BASE_URL %>vendor/js/layout-helpers.js"></script>

{% if settingsPanel %}
    
    <script src="<%= BASE_URL %>vendor/js/theme-settings.js"></script>
    <script>
      // Use settings panel generator to configure the plugin
      window.themeSettings = new ThemeSettings({
        cssPath: '<%= BASE_URL %>css/vendor/',
        themesPath: '<%= BASE_URL %>css/vendor/'
        {%- if styles.length < 3 %},
        styles: ['{{ styles.join("', '")|safe }}']
        {%- endif %}
      });
    </script>
    {% endif %}

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

{% if splashScreen %}
    
    <div class="app-splash-screen" style="background: #fff; position: fixed; z-index: 99999999; top: 0; right: 0; bottom: 0; left: 0; opacity: 1; -webkit-transition: opacity .3s; transition: opacity .3s;">
      <div class="app-splash-screen-content" style="position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);">
        <span class="text-large font-weight-bolder">CompanyName</span>
      </div>
    </div>
    
    {% endif %}

</body>
</html>

import layoutHelpers from '@/layout/helpers.js'
{% if settingsPanel -%}
import themeSettings from '@/vendor/libs/theme-settings/theme-settings.js'
{%- endif %}

export default function () {
  return {
    // Public url
    publicUrl: process.env.BASE_URL,

// Layout helpers
    layoutHelpers,

{% if settingsPanel -%}
    // Theme settings
    themeSettings,
    {%- endif %}

// Check for RTL layout
    get isRtlMode () {
      return document.documentElement.getAttribute('dir') === 'rtl' ||
             document.body.getAttribute('dir') === 'rtl'
    },

// Check if IE
    get isIEMode () {
      return typeof document.documentMode === 'number'
    },

// Check if IE10
    get isIE10Mode () {
      return this.isIEMode && 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 NotFound from '@/components/NotFound'

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')
    }]
  }, {
    // 404 Not Found page
    path: '*',
    component: NotFound
  }]
})

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 && 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 -%}
<style src="@/vendor/styles{% if rtlSupport %}/rtl{% endif %}/bootstrap{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss" lang="scss"></style>
<style src="@/vendor/styles{% if rtlSupport %}/rtl{% endif %}/appwork{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss" lang="scss"></style>
<style src="@/vendor/styles{% if rtlSupport %}/rtl{% endif %}/theme-{{theme}}{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss" lang="scss"></style>
<style src="@/vendor/styles{% if rtlSupport %}/rtl{% endif %}/colors{% if style == 'material' %}-material{% elif style == 'dark' %}-dark{% endif %}.scss" lang="scss"></style>
<style src="@/vendor/styles{% if rtlSupport %}/rtl{% endif %}/uikit.scss" lang="scss"></style>
{%- endif %}
<style src="./style.scss" lang="scss"></style>

$enable-rtl-support: {% if rtlSupport %}true{% else %}false{% endif %};
$enable-light-style: {% if (not settingsPanel and style == 'light') or (settingsPanel and styles.indexOf('light') !== -1) %}true{% else %}false{% endif %};
$enable-material-style: {% if (not settingsPanel and style == 'material') or (settingsPanel and styles.indexOf('material') !== -1) %}true{% else %}false{% endif %};
$enable-dark-style: {% if (not settingsPanel and style == 'dark') or (settingsPanel and styles.indexOf('dark') !== -1) %}true{% else %}false{% endif %};

@mixin feature-ltr($as-child: true) {
  @if $enable-rtl-support {
    @if $as-child {
      html:not([dir=rtl]) & { @content; }
    } @else {
      html:not([dir=rtl]) { @content; }
    }
  } @else {
    @content;
  }
}

@mixin feature-ltr-style() {
  @if $enable-rtl-support {
    &:not([dir=rtl]) { @content; }
  } @else {
    @content;
  }
}

@mixin feature-rtl($as-child: true) {
  @if $enable-rtl-support {
    @if $as-child {
      [dir=rtl] & { @content; }
    } @else {
      [dir=rtl] { @content; }
    }
  }
}

@mixin feature-rtl-style() {
  @if $enable-rtl-support {
    &[dir=rtl] { @content; }
  }
}