Merge branch 'tailwind'

.gitignore

@@ -0,0 +1,4 @@
+.nuxt
+node_modules
+sw.js
+.env

commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional']
+}

jsconfig.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+      "baseUrl": ".",
+      "paths": {
+        "~/*": ["./*"],
+        "@/*": ["./*"],
+        "~~/*": ["./*"],
+        "@@/*": ["./*"]
+      }
+    },
+    "exclude": ["node_modules", ".nuxt", "dist"]
+}

layouts/default.vue

@@ -1,5 +1,3 @@
 <template>
-  <vf-o-layout>
-    <nuxt />
-  </vf-o-layout>
-</template>
+  <nuxt />
+</template>

layouts/error.vue

@@ -1,3 +1,3 @@
 <template>
-  <vf-t-error />
-</template>
+  <vf-t-common-error />
+</template>

nuxt.config.js

@@ -1,14 +1,24 @@
-require('dotenv').config()
-const LodashModuleReplacementPlugin = require('lodash-webpack-plugin')
+require("dotenv").config();
+const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
+const isDev = process.env.NODE_ENV === "development";
+
+const modules = [];
+
+if (!isDev) {
+  modules.push("@nuxtjs/pwa");
+}
 
 export default {
-  mode: 'universal',
+  ssr: false,
+  target: isDev ? "server" : "static",
+//  modern: 'client',
   env: {
     FEATURED_PRODUCT: process.env.FEATURED_PRODUCT
   },
   generate: {
     concurrency: 5,
-    subFolders: false
+    subFolders: false,
+    crawler: true,
   },
   head: {
     title: 'vuefront',
@@ -17,36 +27,60 @@ export default {
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       { hid: 'description', name: 'description', content: 'VueFront' }
     ],
-    link: [{
+    link: [
+      {
         rel: 'icon',
         type: 'image/png',
-        href: process.env.BASE_URL+'favicon.ico'
-      }],
+        href: '/favicon.png'
+      }
+    ],
     script: []
   },
   loading: { color: '#3B8070' },
   modules: [
-    '@nuxtjs/pwa',
     '@nuxtjs/dotenv',
     'vuefront-nuxt',
-    'cookie-universal-nuxt'
+    ...modules,
   ],
-  pwa: {
-    icon: {},
-    manifest: {
-      name: 'VueFront'
-    },
-  },
-  router: {
-    base: process.env.BASE_URL
-  },
+  buildModules: [
+    // https://go.nuxtjs.dev/eslint
+    ['@nuxtjs/eslint-module', { fix: true }],
+    // https://go.nuxtjs.dev/stylelint
+    ['@nuxtjs/stylelint-module', {fix: true}]
+    // '@aceforth/nuxt-optimized-images',
+  ],
+  // optimizedImages: {
+  //   optimizeImages: true,
+  //   optimizeImagesInDev: true
+  // },
   build: {
     babel: {
-      plugins: ['lodash']
+      plugins: ['lodash', 'preval' , "@babel/plugin-proposal-optional-chaining"]
     },
     extractCSS: true,
-    plugins: [new LodashModuleReplacementPlugin({
+    splitChunks: {
+      layouts: true,
+      pages: true,
+      commons: true
+    },
+    postcss: {
+      preset: {
+        features: {
+          // Fixes: https://github.com/tailwindcss/tailwindcss/issues/1190#issuecomment-546621554
+          'focus-within-pseudo-class': false
+        }
+      },
+      plugins: {
+        tailwindcss: {}
+      }
+    },
+    transpile: ["@vuefront/checkout-app"],
+    extractCSS: !isDev,
+    corejs: 2,
+    plugins: [
+      new LodashModuleReplacementPlugin({
         shorthands: true
-      })]
+      })
+    ]
   }
 }

package.json

@@ -1,29 +1,53 @@
 {
   "name": "vuefront-starter-kit",
-  "description": "My terrific VueFront App",
-  "version": "0.1.0",
+  "description": "VueFront App",
+  "version": "0.1.1",
   "author": "dmitriyzhuk",
   "private": true,
   "scripts": {
-    "dev": "nuxt dev -o",
+    "dev": "nuxt dev",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate": "nuxt generate",
-    "analyze": "nuxt build --analyze"
+    "analyze": "nuxt build --analyze",
+    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore",
+    "lint": "yarn lint:js && yarn lint:style"
+  },
+  "lint-staged": {
+    "*.{js,vue}": "eslint",
+    "*.{css,vue}": "stylelint"
   },
   "dependencies": {
-    "@nuxtjs/dotenv": "^1.4.0",
-    "@nuxtjs/pwa": "^3.0.0-beta.16",
-    "cookie-universal-nuxt": "^2.0.17",
-    "nuxt": "2.9.1",
-    "vuefront-nuxt": "^0.2.3"
+    "@aceforth/nuxt-optimized-images": "^1.4.0",
+    "@nuxtjs/dotenv": "^1.4.1",
+    "@nuxtjs/pwa": "^3.3.5",
+    "cookie-universal-nuxt": "^2.1.5",
+    "nuxt": "2.15.7",
+    "nuxt-compress": "^5.0.0",
+    "vuefront-nuxt": "0.3.68"
   },
   "devDependencies": {
-    "@babel/runtime-corejs2": "^7.7.6",
+    "@babel/runtime-corejs2": "^7.14.8",
+    "@commitlint/cli": "^12.1.4",
+    "@commitlint/config-conventional": "^12.1.4",
+    "@nuxtjs/eslint-config": "^6.0.1",
+    "@nuxtjs/eslint-module": "^3.0.2",
+    "@nuxtjs/stylelint-module": "^4.0.0",
+    "babel-eslint": "^10.1.0",
     "babel-plugin-lodash": "^3.3.4",
+    "babel-plugin-preval": "^5.0.0",
     "core-js": "2",
-    "lodash-webpack-plugin": "^0.11.5",
-    "node-sass": "^4.12.0",
-    "sass-loader": "^7.3.1"
+    "eslint": "^7.31.0",
+    "eslint-plugin-nuxt": "^2.0.0",
+    "husky": "^7.0.1",
+    "lint-staged": "^11.0.1",
+    "lodash-webpack-plugin": "^0.11.6",
+    "node-sass": "^4.13.1",
+    "sass-loader": "^8.0.2",
+    "stylelint": "^13.13.1",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-standard": "^22.0.0",
+    "stylelint-scss": "^3.19.0"
   }
 }

stylelint.config.js

@@ -0,0 +1,34 @@
+module.exports = {
+  extends: ["stylelint-config-standard", "stylelint-config-prettier"],
+  plugins: ["stylelint-scss"],
+  // add your custom config here
+  // https://stylelint.io/user-guide/configuration
+  rules: {
+    "at-rule-no-unknown": [
+      true,
+      {
+        ignoreAtRules: [
+          "tailwind",
+          "apply",
+          "variants",
+          "responsive",
+          "screen",
+        ],
+      },
+    ],
+    "scss/at-rule-no-unknown": [
+      true,
+      {
+        ignoreAtRules: [
+          "tailwind",
+          "apply",
+          "variants",
+          "responsive",
+          "screen",
+        ],
+      },
+    ],
+    "declaration-block-trailing-semicolon": null,
+    "no-descending-specificity": null,
+  },
+};

tailwind.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+    purge: [],
+    darkMode: false, // or 'media' or 'class'
+    theme: {
+      extend: {},
+    },
+    variants: {
+      extend: {},
+    },
+    plugins: [
+      require('@tailwindcss/forms'),
+      require('vuefront/tailwind/plugin.js')
+    ],
+  }

vuefront.config.js

@@ -1,6 +1,14 @@
 export default {
-  logo: require('~/assets/img/logo_header.svg'),
-  footerLogo: require('~/assets/img/logo_footer.svg'),
+  app: [],
+  // app: ['@vuefront/checkout-app'],
+  image: {
+    logo: {
+      path: '~/assets/img/logo_header.svg'
+    },
+    footerLogo: {
+      path: '~/assets/img/logo_footer.svg'
+    },
+  },
   layouts: {
     '*': {
       headerMenu: [
@@ -17,7 +25,8 @@ export default {
         [
           'ExtraLinks',
           {
-            links: [{
+            links: [
+              {
                 to: '/store/special',
                 text: 'Special'
               },
@@ -61,7 +70,8 @@ export default {
     },
     '/store/category*': {
       columnLeft: [
-        'StoreCategory', [
+        'StoreCategory',
+        [
           'LatestProduct',
           {
             column: true
@@ -72,7 +82,8 @@ export default {
     '/blog/category*': {
       columnRight: [
         'Search',
-        'BlogCategory', [
+        'BlogCategory',
+        [
           'LatestPost',
           {
             column: true