Skip to content

Instantly share code, notes, and snippets.

@ux-powered

ux-powered/.eslintignore

Last active November 16, 2020 22:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ux-powered/b0b396ccd4ad9c98bf44d9a709ba19e8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ux-powered/b0b396ccd4ad9c98bf44d9a709ba19e8 to your computer and use it in GitHub Desktop.
Download ZIP
Appwork + NUXT Guide
Raw
.eslintignore
bower_components/
build/Release/
node_modules/
jspm_packages/
typings/
.next/
.nuxt/
dist/
/vendor/libs/**/*.js
/vendor/libs/**/*.vue
/static/**/*.js
Raw
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

  1. Remove components/Logo.vue

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

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

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

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

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

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

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

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

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

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

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

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

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

  15. Open package.json and edit lint script

  16. Create {app}/.eslintignore

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

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

Raw
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
}
}
}
})
Raw
inject.js
import Vue from 'vue'
import globals from './vendor/globals'
// Client-side globals
Vue.mixin({
data: globals
})
Raw
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')
}
}
}
Raw
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"
}
}
@zeravcic
Copy link

zeravcic commented Dec 20, 2019 •
edited
Loading

Nice, tnx!

But it seems that there are some errors based on next report:

 @ ./plugins/inject-ssr.js 2:0-39 6:19-26
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js


ERROR  in ./vendor/styles/bootstrap.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: argument `$color-2` of `mix($color-1, $color-2, $weight: 50%)` must be a color
        on line 137 of vendor/styles/_appwork/_functions.scss, in function `mix`
        from line 137 of vendor/styles/_appwork/_functions.scss, in function `rgba-to-hex`
        from line 153 of vendor/styles/_appwork/_mixins.scss, in mixin `bg-variant`
        from line 4 of node_modules/bootstrap/scss/utilities/_background.scss
        from line 2 of node_modules/bootstrap/scss/_utilities.scss
        from line 34 of /home/vagrant/www3/bytenet15-api.test/httpdocs/vendor/styles/bootstrap.scss
>>     @return mix($opaque, $background, $percent);

   ------------^


 @ ./vendor/styles/bootstrap.scss 4:14-229 14:3-18:5 15:22-237
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js


 ERROR  in ./vendor/styles/theme-corporate.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: no mixin named appwork-libs-theme
        on line 18 of /home/vagrant/www3/bytenet15-api.test/httpdocs/vendor/styles/theme-corporate.scss
>> @include appwork-libs-theme($primary-color);

   ---------^


 @ ./vendor/styles/theme-corporate.scss 4:14-235 14:3-18:5 15:22-243
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

I found that in case of removing CSS line '@/vendor/styles/bootstrap.scss', from nuxt.config.js file, first error will disappear.

Envoriment:

  • Vagrant - Homestead v10.0.0 (Ubuntu 18.04.3 LTS (GNU/Linux 4.15.0-58-generic x86_64))
  • node v12.9.1; npm v6.11.2; yarn v1.17.3
  • Nuxt.js v2.11.0
  • Appwork v1.4.0

Any help? 😕

@ux-powered
Copy link
Author

ux-powered commented Dec 22, 2019

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);
  // ...
}

@iFeras93
Copy link

iFeras93 commented Nov 16, 2020

@ux-powered

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment