Appwork + NUXT Guide

.eslintignore

bower_components/
build/Release/
node_modules/
jspm_packages/
typings/
.next/
.nuxt/
dist/

/vendor/libs/**/*.js
/vendor/libs/**/*.vue
/static/**/*.js

README.md

Notes:

• Third-party plugins are not tested with SSR;
• ThemeSettings component is not supported, and, as a result, no multi theming.

---

1. Create a new NUXT app {app} with the next settings:

• UI framework: bootstrap
• Mode: Universal
• axios: true
• aslint: true
• prettier: no
• Package manager: Yarn

2. Remove components/Logo.vue

3. Copy vue-starter/src/style.scss to {app}/assets/

4. Remove {app}/layouts/default.vue

5. Copy layouts from vue-starter/src/layout/ to {app}/layouts/

6. Rename the required layout file to default.vue.

7. Open {app}/layouts/default.vue and replace <router-view /> with <nuxt />

8. Remove {app}/pages/index.vue and create default index.vue and page-2/index.vue

9. Copy vue-starter/public/vendor/ directory to {app}/static/

10. Remove {app}/static/vendor/js/theme-settings.js

11. Copy vue-starter/src/vendor/ directory to {app}/

12. Open {app}/vendor/styles/_theme/_libs.scss and comment all includes within appwork-libs-theme and appwork-libs-material-theme mixins

13. Copy vue-starter/src/globals.js and vue-starter/src/layout/helpers.js to {app}/plugins/vendor/

14. Open {app}/plugins/vendor/globals.js and replace import layoutHelpers from '@/layout/helpers.js’ with import layoutHelpers from './helpers.js'

15. Create {app}/plugins/inject.js and {app}/plugins/inject-ssr.js

16. Open package.json and edit lint script

17. Create {app}/.eslintignore

18. Add perfect-scrollbar, node-sass, sass-loader packages and resolutions block to package.json

19. Edit {app}/nuxt.config.js

---

head.htmlAttrs.class - Enable default/material style

head.meta - Meta tags

head.link - Roboto font and icons. Uncomment required fonts

head.script - Appwork’s static scripts

css - CSS files. Change @/vendor/styles/theme-corporate.scss with whatever theme you want

plugins - Inject globals

modules - Add {css: false} because we already have one

build - Add node_modules alias to webpack config

inject-ssr.js

import Vue from 'vue'
import globals from './vendor/globals'

// Server-side globals

Vue.mixin({
  data: function () {
    const settings = globals()

    return {
      get layoutNavbarBg() {
        return settings.layoutNavbarBg
      },

      // Layout sidenav color
      get layoutSidenavBg() {
        return settings.layoutSidenavBg
      },

      // Layout footer color
      get layoutFooterBg() {
        return settings.layoutFooterBg
      }
    }
  }
})

inject.js

import Vue from 'vue'
import globals from './vendor/globals'

// Client-side globals

Vue.mixin({
  data: globals
})

nuxt.config.js

const path = require('path')
const pkg = require('./package')

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    htmlAttrs: {
      class: 'default-style'
    },
    meta: [
      { charset: 'utf-8' },
      { hid: 'description', name: 'description', content: pkg.description },
      { 'http-equiv': 'x-ua-compatible', content: 'IE=edge,chrome=1' },
      { 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' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900' },
      // { rel: 'stylesheet', href: '/vendor/fonts/fontawesome.css' },
      { rel: 'stylesheet', href: '/vendor/fonts/ionicons.css' }
      // { rel: 'stylesheet', href: '/vendor/fonts/linearicons.css' },
      // { rel: 'stylesheet', href: '/vendor/fonts/open-iconic.css' },
      // { rel: 'stylesheet', href: '/vendor/fonts/pe-icon-7-stroke.css' },
    ],
    script: [
      { src: '/vendor/js/layout-helpers.js' }
      // { src: '/vendor/js/material-ripple.js' },
      // { type: 'text/javascript', innerHTML: 'window.attachMaterialRippleOnLoad();' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    '@/vendor/styles/bootstrap.scss',
    '@/vendor/styles/appwork.scss',
    '@/vendor/styles/theme-corporate.scss',
    '@/vendor/styles/colors.scss',
    '@/vendor/styles/uikit.scss',
    '@/assets/style.scss'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [{
    src: '~/plugins/inject.js',
    ssr: false
  },
  {
    src: '~/plugins/inject-ssr.js',
    ssr: true
  }],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://bootstrap-vue.js.org/docs/
    ['bootstrap-vue/nuxt', {
      css: false
    }]
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }

      config.resolve.alias = config.resolve.alias || {}
      config.resolve.alias.node_modules = path.join(__dirname, 'node_modules')
    }
  }
}

package.json

{
  "name": "nuxt-appwork-140",
  "version": "1.0.0",
  "description": "My fantastic Nuxt.js project",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue .",
    "precommit": "npm run lint",
    "test": "jest"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "bootstrap": "~4.3.1",
    "bootstrap-vue": "2.0.4",
    "cross-env": "^5.2.0",
    "express": "^4.16.4",
    "nuxt": "^2.4.0",
    "perfect-scrollbar": "~1.4.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^0.0.1",
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.1.0",
    "eslint": "^5.15.1",
    "eslint-config-standard": ">=12.0.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": ">=2.16.0",
    "eslint-plugin-jest": ">=22.3.0",
    "eslint-plugin-node": ">=8.0.1",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-promise": ">=4.0.1",
    "eslint-plugin-standard": ">=4.0.0",
    "eslint-plugin-vue": "^5.2.2",
    "jest": "^24.1.0",
    "node-sass": "~4.12.0",
    "nodemon": "^1.18.9",
    "sass-loader": "^7.1.0",
    "vue-jest": "^3.0.3"
  },
  "resolutions": {
    "sass-loader/node-sass": "~4.12.0"
  }
}

Hi, for anyone who have the same issue, please take attention on specified versions in the package.json. I haven't upgraded Bootstrap version yet (4.4.0) and this is why the SCSS "mix" error appears. Currently only version 4.3.x is supported.

Also, make sure that only content of the mixins is commented out, not entire mixins. For example, this will not work:

/*
@mixin appwork-libs-theme($background, $color: null) {
  @include nouislider-theme($background);
  @include quill-theme($background);
  ...
}

@mixin appwork-libs-material-theme($background, $color: null) {
  @include material-nouislider-theme($background);
  @include quill-theme($background);
  ...
}
*/

But this will:

@mixin appwork-libs-theme($background, $color: null) {
  // @include nouislider-theme($background);
  // @include quill-theme($background);
  // ...
}

@mixin appwork-libs-material-theme($background, $color: null) {
  // @include material-nouislider-theme($background);
  // @include quill-theme($background);
  // ...
}

@ux-powered

Any update for this guide, really we need nuxt version starter.