Vue.js - Appwork v1.6.0 Docs

vue-starter

public

vendor

Appwork's static assets

fonts

js

public/index.html

src

assets

components

layout

Page layouts

Layout1.vue

Layout1Flex.vue

...

router

Router config

vendor

Appwork's sources

libs

Vue components

vue-color

vue-gallery

...

styles

SCSS sources

_appwork

Appwork includes

_custom-variables

Custom variables

_theme

Theme includes

_uikit

UIKit includes

pages

Page styles

rtl

Styles with RTL support enabled

appwork.scss

appwork-material.scss

appwork-dark.scss

...

App.vue

globals.js

Global properties and methods

...

tests

babel.config.js

package.json

vue.config.js

...

The starter project by default includes all third-party components.
Optionally you can remove unwanted components to reduce bundle size and compile time:

Remove unwanted packages from the dependencies section in the package.json file.
Remove related directories within the src/vendor/libs directory.
Remove related @imports and @includes in the src/vendor/styles/_theme/_libs.scss file.

For example, if you want to exclude vue-multiselect component, you will need to:

Remove vue-multiselect dependency in the package.json file.
Remove the src/vendor/libs/vue-multiselect directory.
Remove @import "~@/vendor/libs/vue-multiselect/mixins";, @include vue-multiselect-theme($background, $color); and @include material-vue-multiselect-theme($background, $color); lines in the src/vendor/styles/_theme/_libs.scss file.

Download and install latest Node.js LTS: https://nodejs.org/en/.
Download and install Git: https://git-scm.com/downloads.
Logout from the system and login again.
Launch cmd.exe as an administrator and run command npm install --add-python-to-path='true' --global --production windows-build-tools.
Logout from the system and login again.
Go to the vue-starter directory and run command npm install.

Update system: sudo apt-get update && sudo apt-get upgrade.
Install curl: sudo apt-get install curl.
Install latest Node.js LTS and build tools: https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions-enterprise-linux-fedora-and-snap-packages.
Install Git: https://git-scm.com/download/linux.
Go to the vue-starter directory and run command npm install.

Install Xcode from App Store. After installing, launch the Xcode, accept the license agreement and wait while components installed.
Download and install latest Node.js LTS: https://nodejs.org/en/.
Download and install Git: https://git-scm.com/downloads.
Go to the vue-starter directory and run command npm install.

Instead of configuring the layout manually, you can use the Starter template generator. It will dramatically simplify the initial setup.

public/index.html

<!DOCTYPE html>

<html lang="en" class="light-style">
  <head>
    <title>Vue Starter</title>

    <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">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- 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="<%= BASE_URL %>vendor/fonts/fontawesome.css"> -->
    <link rel="stylesheet" href="<%= BASE_URL %>vendor/fonts/ionicons.css">
    <!-- <link rel="stylesheet" href="<%= BASE_URL %>vendor/fonts/linearicons.css"> -->
    <!-- <link rel="stylesheet" href="<%= BASE_URL %>vendor/fonts/open-iconic.css"> -->
    <!-- <link rel="stylesheet" href="<%= BASE_URL %>vendor/fonts/pe-icon-7-stroke.css"> -->

    <!-- Layout helpers -->
    <script src="<%= BASE_URL %>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>

    <!-- built files will be auto injected -->
  </body>
</html>

<!DOCTYPE html>

<html lang="en" class="light-style">
  <head>
    <title>Vue Starter</title>

    <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">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- 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="<%= BASE_URL %>vendor/fonts/fontawesome.css"> -->
    <link rel="stylesheet" href="<%= BASE_URL %>vendor/fonts/ionicons.css">
    <!-- <link rel="stylesheet" href="<%= BASE_URL %>vendor/fonts/linearicons.css"> -->
    <!-- <link rel="stylesheet" href="<%= BASE_URL %>vendor/fonts/open-iconic.css"> -->
    <!-- <link rel="stylesheet" href="<%= BASE_URL %>vendor/fonts/pe-icon-7-stroke.css"> -->

    <!-- Core stylesheets -->
    <link rel="stylesheet" href="<%= BASE_URL %>css/vendor/bootstrap.css" class="theme-settings-bootstrap-css">
    <link rel="stylesheet" href="<%= BASE_URL %>css/vendor/appwork.css" class="theme-settings-appwork-css">
    <link rel="stylesheet" href="<%= BASE_URL %>css/vendor/theme-corporate.css" class="theme-settings-theme-css">
    <link rel="stylesheet" href="<%= BASE_URL %>css/vendor/colors.css" class="theme-settings-colors-css">
    <link rel="stylesheet" href="<%= BASE_URL %>css/vendor/uikit.css">

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

    <!-- Theme settings -->
    <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/'
      });
    </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>

    <!-- built files will be auto injected -->
  </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 src/layout directory.

src/router/index.js

...

import Layout1 from '@/layout/Layout1'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: Layout1,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];

src/router/index.js

...

import Layout1Flex from '@/layout/Layout1Flex'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: Layout1Flex,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];

src/router/index.js

...

import Layout2 from '@/layout/Layout2'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: Layout2,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];

src/router/index.js

...

import Layout2Flex from '@/layout/Layout2Flex'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: Layout2Flex,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];

src/router/index.js

...

import LayoutWithoutNavbar from '@/layout/LayoutWithoutNavbar'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: LayoutWithoutNavbar,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];

src/router/index.js

...

import LayoutWithoutNavbarFlex from '@/layout/LayoutWithoutNavbarFlex'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: LayoutWithoutNavbarFlex,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];

src/router/index.js

...

import LayoutWithoutSidenav from '@/layout/LayoutWithoutSidenav'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: LayoutWithoutSidenav,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];

src/router/index.js

...

import LayoutHorizontalSidenav from '@/layout/LayoutHorizontalSidenav'

...

const router = new Router({
  ...

  routes: [{
    ...
  }, {
    path: '/page',
    component: LayoutHorizontalSidenav,
    children: [{
      path: '',
      component: () => import('@/components/Page')
    }]
  }, {
    ...
  }]

  ...
];

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 enable Appwork's stylesheets compilation (use the generator to see the example):

Open src/App.vue file and remove all Appwork's SCSS imports.

Open vue.config.js file and:

Import required webpack modules

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

Define STYLES variable

const STYLES = {
  'vendor/appwork': './src/vendor/styles/appwork.scss',
  'vendor/appwork-material': './src/vendor/styles/appwork-material.scss',
  'vendor/appwork-dark': './src/vendor/styles/appwork-dark.scss',
  'vendor/bootstrap': './src/vendor/styles/bootstrap.scss',
  'vendor/bootstrap-material': './src/vendor/styles/bootstrap-material.scss',
  'vendor/bootstrap-dark': './src/vendor/styles/bootstrap-dark.scss',
  'vendor/colors': './src/vendor/styles/colors.scss',
  'vendor/colors-material': './src/vendor/styles/colors-material.scss',
  'vendor/colors-dark': './src/vendor/styles/colors-dark.scss',
  'vendor/uikit': './src/vendor/styles/uikit.scss',
  'vendor/theme-air': './src/vendor/styles/theme-air.scss',
  'vendor/theme-air-material': './src/vendor/styles/theme-air-material.scss',
  'vendor/theme-air-dark': './src/vendor/styles/theme-air-dark.scss',
  'vendor/theme-corporate': './src/vendor/styles/theme-corporate.scss',
  'vendor/theme-corporate-material': './src/vendor/styles/theme-corporate-material.scss',
  'vendor/theme-corporate-dark': './src/vendor/styles/theme-corporate-dark.scss',
  'vendor/theme-cotton': './src/vendor/styles/theme-cotton.scss',
  'vendor/theme-cotton-material': './src/vendor/styles/theme-cotton-material.scss',
  'vendor/theme-cotton-dark': './src/vendor/styles/theme-cotton-dark.scss',
  'vendor/theme-gradient': './src/vendor/styles/theme-gradient.scss',
  'vendor/theme-gradient-material': './src/vendor/styles/theme-gradient-material.scss',
  'vendor/theme-gradient-dark': './src/vendor/styles/theme-gradient-dark.scss',
  'vendor/theme-paper': './src/vendor/styles/theme-paper.scss',
  'vendor/theme-paper-material': './src/vendor/styles/theme-paper-material.scss',
  'vendor/theme-paper-dark': './src/vendor/styles/theme-paper-dark.scss',
  'vendor/theme-shadow': './src/vendor/styles/theme-shadow.scss',
  'vendor/theme-shadow-material': './src/vendor/styles/theme-shadow-material.scss',
  'vendor/theme-shadow-dark': './src/vendor/styles/theme-shadow-dark.scss',
  'vendor/theme-soft': './src/vendor/styles/theme-soft.scss',
  'vendor/theme-soft-material': './src/vendor/styles/theme-soft-material.scss',
  'vendor/theme-soft-dark': './src/vendor/styles/theme-soft-dark.scss',
  'vendor/theme-sunrise': './src/vendor/styles/theme-sunrise.scss',
  'vendor/theme-sunrise-material': './src/vendor/styles/theme-sunrise-material.scss',
  'vendor/theme-sunrise-dark': './src/vendor/styles/theme-sunrise-dark.scss',
  'vendor/theme-twitlight': './src/vendor/styles/theme-twitlight.scss',
  'vendor/theme-twitlight-material': './src/vendor/styles/theme-twitlight-material.scss',
  'vendor/theme-twitlight-dark': './src/vendor/styles/theme-twitlight-dark.scss',
  'vendor/theme-vibrant': './src/vendor/styles/theme-vibrant.scss',
  'vendor/theme-vibrant-material': './src/vendor/styles/theme-vibrant-material.scss',
  'vendor/theme-vibrant-dark': './src/vendor/styles/theme-vibrant-dark.scss'
}

Within "chainWebpack" method add styles to entry points

Object.keys(STYLES).forEach(k => {
  config.entry(k)
    .add(STYLES[k])
})

Within "chainWebpack" method add the next code to disable injection of "vendor" assets

config.plugin('html')
  .tap(args => {
    args[0].excludeAssets = [/[/\\]vendor[/\\]/]
    return args
  })

Within "chainWebpack" method add HtmlWebpackExcludeAssetsPlugin plugin

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

Within "chainWebpack" method add environment config

// 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)?|bootstrap(?:-material)?|colors(?:-material)?|uikit|theme-[^.]+)\..*?\.css$/,
      targetName: '$1.css'
    }])
}

To enable a theme, import theme SCSS file in the src/App.vue file.

src/App.vue

<style src="@/vendor/styles/theme-air.scss" lang="scss"></style>

To enable a theme, include the required theme stylesheet from the css/vendor/ path.

public/index.html

<link rel="stylesheet" href="<%= BASE_URL %>css/vendor/theme-air.css" class="theme-settings-theme-css">

To enable material styling you need to:

Set $enable-material-style variable to true.

src/vendor/styles/_custom-variables/_features.scss

...
$enable-material-style: true;
...

Set material-style class on the <html> element instead of light-style.
```
public/index.html
```
```
<html class="material-style">
```

Add -material suffix to bootstrap.scss, appwork.scss, theme-*.scss and colors.scss imports in the src/App.vue file.

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, appwork, theme-* and colors stylesheets.

public/index.html

<link rel="stylesheet" href="<%= BASE_URL %>css/vendor/bootstrap-material.css" class="theme-settings-bootstrap-css">
<link rel="stylesheet" href="<%= BASE_URL %>css/vendor/appwork-material.css" class="theme-settings-appwork-css">
<link rel="stylesheet" href="<%= BASE_URL %>css/vendor/theme-corporate-material.css" class="theme-settings-theme-css">
<link rel="stylesheet" href="<%= BASE_URL %>css/vendor/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.
```
public/index.html
```
```
<script src="<%= BASE_URL %>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.
```
public/index.html
```
```
<script src="<%= BASE_URL %>vendor/js/material-ripple.js"></script>
```

To enable dark styling you need to:

Set $enable-dark-style variable to true.

src/vendor/styles/_custom-variables/_features.scss

...
$enable-dark-style: true;
...

Set dark-style class on the <html> element instead of light-style.
```
public/index.html
```
```
<html class="dark-style">
```

Add -dark suffix to bootstrap.scss, appwork.scss, theme-*.scss and colors.scss imports in the src/App.vue file.

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, appwork, theme-* and colors stylesheets.

public/index.html

<link rel="stylesheet" href="<%= BASE_URL %>css/vendor/bootstrap-dark.css" class="theme-settings-bootstrap-css">
<link rel="stylesheet" href="<%= BASE_URL %>css/vendor/appwork-dark.css" class="theme-settings-appwork-css">
<link rel="stylesheet" href="<%= BASE_URL %>css/vendor/theme-corporate-dark.css" class="theme-settings-theme-css">
<link rel="stylesheet" href="<%= BASE_URL %>css/vendor/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.

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

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 vue.config.js file and edit paths to load Appwork's SCSS from the src/vendor/styles/rtl/ directory instead of src/vendor/styles/.

vue.config.js

...

const STYLES = {
  'vendor/appwork': './src/vendor/styles/rtl/appwork.scss',
  'vendor/appwork-material': './src/vendor/styles/rtl/appwork-material.scss',
  'vendor/appwork-dark': './src/vendor/styles/rtl/appwork-dark.scss',
  'vendor/bootstrap': './src/vendor/styles/rtl/bootstrap.scss',
  'vendor/bootstrap-material': './src/vendor/styles/rtl/bootstrap-material.scss',
  'vendor/bootstrap-dark': './src/vendor/styles/rtl/bootstrap-dark.scss',
  ...
}

...

To enable RTL direction, add dir="rtl" attribute to the <html> element.

public/index.html

<html dir="rtl">

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

After the initial layout setup the recommended way to control layout options is layout helpers, because the helpers do some extra work, such as: setting container paddings (when navbar is fixed), performing layout animations, setting correct sidenav state classes depending on screen size etc.

public/index.html

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

Open console/terminal, go to the vue-starter directory and run npm run task_name.

Task	Description
`serve`	Run dev server.
`build`	Build for production. Please note that output stylesheets within `css/vendor/` directory will not have a hash in their filenames. So you will need to define caching strategy for these files by yourself.
`test:unit`	Run unit tests.
`test:e2e`	Run end-to-end tests.
`lint`	Run linting.

Do not forget to commit changes or clone the project before performing migration steps.

Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)
Copy with replace all SCSS files within src/vendor/styles/ and src/vendor/styles/rtl/ directories:
```
src/vendor/styles/*.scss
src/vendor/styles/rtl/*.scss
```

Copy with replace changed files and directories:

public/vendor/fonts/
public/vendor/js/
src/style.scss
src/vendor/styles/_appwork/
src/vendor/styles/_uikit/
src/vendor/libs/nouislider/
src/vendor/libs/sidenav/
src/vendor/libs/vue-multiselect/
src/vendor/libs/vue-plyr/
src/vendor/libs/vue-simple-calendar/
src/vendor/libs/vuejs-datepicker/

Update:

package.json. Diff
Remove node_modules directory and package-lock.json. Then execute npm install
Fix linting errors.

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:

src/vendor/styles/_appwork/_functions.scss
src/vendor/libs/vue-flatpickr-component/
src/vendor/libs/vue-input-tag/
src/vendor/libs/vue-multiselect/
src/vendor/libs/vue-notification/
src/vendor/libs/vue-plyr/
src/vendor/libs/vue-slider-component/
src/vendor/libs/vuejs-datepicker/

Add plyr package to your package.json:

{
  ...,
  "dependencies": {
    ...
    "plyr": "~3.5.6",
    ...
  },
  ...
}

Copy with replace the next file:

src/vendor/libs/vue-flatpickr-component/flatpickr.scss

Upgrade Node.js to the latest LTS release (https://nodejs.org/en/)

Note: Yarn package manager is not reqired anymore.

Remove the next files and directories:

src/vendor/styles/migrate/
src/vendor/libs/plyr/

Copy new files and directories:

src/vendor/styles/_custom-variables/_appwork-dark.scss
src/vendor/styles/_custom-variables/_features.scss
src/vendor/libs/vue-plyr/

Copy with replace all SCSS files within src/vendor/styles/ and src/vendor/styles/rtl/ directories:
```
src/vendor/styles/*.scss
src/vendor/styles/rtl/*.scss
```

Copy with replace changed files and directories:

babel.config.js
public/vendor/fonts/fontawesome/
public/vendor/fonts/fontawesome.css
public/vendor/js/
src/style.scss
src/vendor/styles/_appwork/
src/vendor/styles/_theme/
src/vendor/styles/_uikit/
src/vendor/styles/pages/
src/vendor/libs/c3/
src/vendor/libs/nouislider/
src/vendor/libs/perfect-scrollbar/
src/vendor/libs/sidenav/
src/vendor/libs/spinkit/
src/vendor/libs/sweet-modal-vue/
src/vendor/libs/theme-settings/
src/vendor/libs/v-img/
src/vendor/libs/vue-awesome-swiper/
src/vendor/libs/vue-color/
src/vendor/libs/vue-context-menu/
src/vendor/libs/vue-data-tables/
src/vendor/libs/vue-dropzone/
src/vendor/libs/vue-flatpickr-component/
src/vendor/libs/vue-form-wizard/
src/vendor/libs/vue-gallery/
src/vendor/libs/vue-input-tag/
src/vendor/libs/vue-jstree/
src/vendor/libs/vue-multiselect/
src/vendor/libs/vue-notification/
src/vendor/libs/vue-number-input-spinner/
src/vendor/libs/vue-password-strength-meter/
src/vendor/libs/vue-quill-editor/
src/vendor/libs/vue-simple-calendar/
src/vendor/libs/vue-simplemde/
src/vendor/libs/vue-slider-component/
src/vendor/libs/vue-toasted/
src/vendor/libs/vuejs-datepicker/

Update:

package.json. Diff

vue.config.js. Diff

src/globals.js. Diff

src/main.js. Diff

src/vendor/styles/_custom-variables/_libs.scss. Diff

src/vendor/styles/_custom-variables/_pages.scss. Diff

src/vendor/styles/_custom-variables/_uikit.scss. Diff
If you're using multi-theming setup (with ThemeSettings plugin enabled), you need to update your vue.config.js. Use Starter template generator.

Edit variables in the 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 node_modules directory and then execute npm install
Fix linting errors.

Breaking: isRTL global variable is renamed to isRtlMode.

theme-default class is renamed to theme-light.

[Before] public/index.html

<html lang="en" class="default-style">

[After] public/index.html

<html lang="en" class="light-style">

If you need IE10 support, add the next code to the end of the head block.

public/index.html

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

(Optional) Upgrade Node.js to 10.16 LTS and Yarn
(Optional) Copy new default "Not Found" page:
1. Copy src/components/NotFound.vue.
2. Edit src/router/index.js. Diff

Copy with replace changed files and directories:

src/vendor/styles/_appwork/
src/vendor/libs/c3/
src/vendor/libs/nouislider/
src/vendor/libs/sidenav/
src/vendor/libs/vue-flatpickr-component/
src/vendor/libs/vue-quill-editor/
src/vendor/libs/vue-simplemde/
public/vendor/fonts/fontawesome/
public/vendor/fonts/fontawesome.css
public/vendor/fonts/ionicons/
public/vendor/fonts/ionicons.css
public/vendor/fonts/linearicons/
public/vendor/fonts/pe-icon-7-stroke/
public/vendor/js/

Update:

babel.config.js. Diff

package.json. Diff

vue.config.js. Diff

src/style.scss. Diff
Vue CLI 4 changed testing features:
1. Moved tests/unit/.eslintrc.js to tests/e2e/. Diff
2. New tests/e2e/custom-commands.
3. New tests/e2e/globals.js.
4. New tests/e2e/page-objects.
5. New tests/e2e/specs/test-with-pageobjects.js.
6. Changed tests/e2e/custom-assertions/elementCount.js. Diff
7. Changed tests/e2e/specs/test.js. Diff
Execute yarn upgrade

Some changes in Bootstrap-Vue (See full list on https://bootstrap-vue.js.org/docs/misc/changelog):

Introduced new b-toast component.
Note: :variant and :solid options have no effect, use :toastClass instead.
To set classes to 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>

To set classes to b-modal's inner .modal element use modal-class= instead of class=.
Form's :state behaviour was changed, pass true for success state and false for error state.
To set classes to 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 vue-demo/src/components/ui/TooltipsAndPopovers.vue for example.

Changes in third-party components:

Directory structure of 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:
```
src/vendor/styles/migrate/
```
Copy with replace all SCSS files within src/vendor/styles/ and src/vendor/styles/rtl/ directories:
```
src/vendor/styles/*.scss
src/vendor/styles/rtl/*.scss
```

Copy with replace changed files and directories:

public/vendor/fonts/
public/vendor/js/
src/vendor/styles/_appwork/
src/vendor/styles/_theme/
src/vendor/styles/_uikit/_social.scss
src/vendor/styles/pages/clients.scss
src/vendor/styles/pages/messages.scss
src/vendor/libs/mega-dropdown/
src/vendor/libs/nouislider/
src/vendor/libs/plyr/
src/vendor/libs/sidenav/
src/vendor/libs/vue-awesome-swiper/
src/vendor/libs/vue-flatpickr-component/
src/vendor/libs/vue-miltiselect/
src/vendor/libs/vue-quill-editor/
src/vendor/libs/vue-simple-calendar/
src/vendor/libs/vue-simplemde/
src/vendor/libs/vue-slider-component/
src/vendor/libs/vue-toasted/
src/vendor/libs/vuejs-datepicker/

Update:

babel.config.js. Diff

package.json. Diff

vue.config.js. Diff

public/index.html. Diff

src/globals.js. Diff

src/style.scss. Diff
Find and replace all occurences of "baseUrl" with "publicUrl" within src directory
Execute yarn upgrade

Bootstrap CSS:

Import migration SCSS file in src/style.scss:

@import '~@/vendor/styles/migrate/appwork-130';

Remove this import after you correct all changed CSS classes in your HTML code.

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 src/vendor/styles/_custom-variables/_appwork.scss and src/vendor/styles/_custom-variables/_appwork-material.scss:

$enable-validation-icons: true;

Update package.json. Diff
Remove node_modules directory
Execute yarn install

Copy appwork-v1_2_0/vue-starter directory and rename it to {your-project-cli3}
Generate {your-project-cli3}/vue.config.js and {your-project-cli3}/public/index.html depending on options you're using in your project. Use Vue Starter Template Generator .
Remove {your-project-cli3}/src directory
Copy {your-project}/src directory to {your-project-cli3}
Copy your custom files from {your-project}/static directory to {your-project-cli3}/public/static
Copy tests
Update package.json
Update src/globals.js. Diff
Update src/main.js. Diff
Update src/styles.scss. Diff

Copy with replace changed files and directories:

src/vendor/libs/vue-gallery/
src/vendor/libs/vue-simplemde/
src/vendor/libs/vue-toasted/
src/vendor/libs/mega-dropdown/mega-dropdown.js
src/vendor/libs/sidenav/sidenav.js
src/vendor/libs/spinkit/spinkit.scss
src/vendor/libs/vue-dropzone/vue-dropzone.scss
src/vendor/libs/vue-multiselect/vue-multiselect.scss
src/vendor/libs/vuejs-datepicker/vuejs-datepicker.scss
src/vendor/styles/_appwork/_accordion.scss
src/vendor/styles/_appwork/_breadcrumb.scss
src/vendor/styles/_appwork/_buttons.scss
src/vendor/styles/_appwork/_close.scss
src/vendor/styles/_appwork/_custom-forms.scss
src/vendor/styles/_appwork/_mixins.scss
src/vendor/styles/_appwork/_switcher.scss
src/vendor/styles/_appwork/_variables-material.scss
src/vendor/styles/_appwork/_variables.scss
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
Execute yarn install

Docs v1.6.0 / Vue.js HTML5 Angular React Laravel Laravel + Vue.js Rails Rails + Turbolinks ASP.NET Core ASP.NET Core MVC ASP.NET MVC ASP.NET MVC + Webpack

OTHER
Settings panel Layout helpers

`vue-starter` directory structure

Third-party components

Installation

Windows

Ubuntu

Mac OS X

Page structure

`public/index.html`

Layouts

Appwork's stylesheets

Theming

Material styling

Dark styling

RTL support

Layout options

Generator

Available tasks

Migration guide

Docs v1.6.0 / Vue.js HTML5 Angular React Laravel Laravel + Vue.js Rails Rails + Turbolinks ASP.NET Core ASP.NET Core MVC ASP.NET MVC ASP.NET MVC + Webpack OTHER Settings panel Layout helpers

OTHER

Windows

Ubuntu

Mac OS X

Page structure

Docs v1.6.0 / Vue.js HTML5 Angular React Laravel Laravel + Vue.js Rails Rails + Turbolinks ASP.NET Core ASP.NET Core MVC ASP.NET MVC ASP.NET MVC + Webpack

OTHER
Settings panel Layout helpers