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

@ux-powered

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