Merge pull request #38 from bakateam/migrate-to-nuxtjs

Migrate to nuxtjs

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -1,23 +1,91 @@
-.DS_Store
-node_modules
-/dist
-package-lock.json
-yarn.lock
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock
 
-# Editor directories and files
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
 .idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2020 Meraki UI
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-    <img src="/src/assets/merakiui-og.png" alt="Ibis logo" width="480">
+    <img src="assets/merakiui-og.png" alt="Ibis logo" width="480">
 
 ## Meraki UI
 

assets/css/custom-utilities.css

@@ -17,4 +17,4 @@
 
 ::-webkit-scrollbar-thumb:hover {
     background: #718096;
-}
+}

assets/css/tailwind.css

@@ -7,4 +7,4 @@
 /* @import "./custom-components.css"; */
 
 @import "tailwindcss/utilities";
-@import "./custom-utilities.css";
+@import "./custom-utilities.css";

babel.config.js

@@ -1,4 +0,0 @@
-module.exports = {
-    presets: ["@vue/cli-plugin-babel/preset"],
-    plugins: ["@babel/plugin-syntax-dynamic-import"],
-};

components/Logo.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
+      fill="#00C58E"
+    />
+    <path
+      d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
+      fill="#108775"
+    />
+    <path
+      d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
+      fill="#2F495E"
+    />
+  </svg>
+</template>
+
+<style>
+.NuxtLogo {
+  animation: 1s appear;
+  margin: auto;
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+}
+</style>

components/Main.vue

@@ -34,7 +34,7 @@
 
 <script>
 // Application components
-import AppButton from "@/components/utilities/AppButton.vue";
+import AppButton from "~/components/utilities/AppButton.vue";
 
 // Alerts
 import AlertsSuccessPop from "./ui/Alerts/SuccessPop";
@@ -98,7 +98,7 @@ import FootersSimple from "./ui/Footers/Simple";
 import FootersWithDetails from "./ui/Footers/WithDetails";
 import FootersWithSubscribeForm from "./ui/Footers/WithSubscribeForm";
 
-import Component from "../models/ComponentsFilter";
+import Component from "~/models/ComponentsFilter";
 
 export default {
     components: {

components/README.md

@@ -0,0 +1,7 @@
+# COMPONENTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._

components/ui/Heros/ECommerce.vue

@@ -50,7 +50,7 @@
                         </div>
                 
                         <div class="flex items-center justify-center w-full mt-6 md:mt-0 md:w-1/2">
-                            <img class="w-full h-full max-w-2xl" src="../../../assets/svg/Catalogue-pana.svg" alt="">
+                            <img class="w-full h-full max-w-2xl" src="~/assets/svg/Catalogue-pana.svg" alt="">
                         </div>
                     </div>
                 </div>

components/utilities/ViewComponent.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import AppButton from "@/components/utilities/AppButton.vue";
+import AppButton from "~/components/utilities/AppButton.vue";
 import CodeSnippet from "./CodeSnippet";
 
 export default {
@@ -70,6 +70,7 @@ export default {
             copied: false,
         }
     },
+    
     methods: {
         onCopy() {
             this.copied = ! this.copied;

layouts/default.vue

@@ -0,0 +1,3 @@
+<template>
+  <Nuxt />
+</template>

nuxt.config.js

@@ -0,0 +1,70 @@
+export default {
+  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
+  ssr: false,
+
+  // Target: https://go.nuxtjs.dev/config-target
+  target: 'static',
+
+  googleAnalytics: {
+    id: "UA-167213766-1"
+  },
+
+  // Global page headers: https://go.nuxtjs.dev/config-head
+  head: {
+    title: 'Meraki UI Tailwindcss Components',
+    htmlAttrs: {
+      lang: 'en'
+    },
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: 'Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.' },
+      { name: "twitter:card", content: "summary_large_image" },
+      { name: "twitter:title", content: "Meraki UI Tailwindcss Components" },
+      {
+        name: "twitter:description",
+        content:
+          "Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
+      },
+      { name: "twitter:image", content: '~/assets/merakiui-og.png' },
+      { property: "og:title", content: "Meraki UI Tailwindcss Components" },
+      { property: "og:site_name", content: "Meraki UI" },
+      { property: "og:type", content: "website" },
+      { property: "og:image", content: '~/assets/merakiui-og.png' },
+      {
+        property: "og:description",
+        content:
+          "Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
+      },
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+    ]
+  },
+
+  // Global CSS: https://go.nuxtjs.dev/config-css
+  css: [
+  ],
+
+  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+  plugins: [
+    '~/plugins/vue-clipboard'
+  ],
+
+  // Auto import components: https://go.nuxtjs.dev/config-components
+  components: true,
+
+  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
+  buildModules: [
+    '@nuxtjs/tailwindcss',
+    '@nuxtjs/google-analytics'
+  ],
+
+  // Modules: https://go.nuxtjs.dev/config-modules
+  modules: [
+  ],
+
+  // Build Configuration: https://go.nuxtjs.dev/config-build
+  build: {
+  }
+}

package.json

@@ -1,36 +1,30 @@
 {
   "name": "merakiui",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
   },
   "dependencies": {
-    "autoprefixer": "^9.7.6",
-    "core-js": "^3.6.4",
-    "highlight.js": "^10.0.2",
-    "postcss-import": "^12.0.1",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1",
-    "vue": "^2.6.11",
-    "vue-analytics": "^5.22.1",
-    "vue-backtotop": "^1.6.1",
-    "vue-clipboard2": "^0.3.1",
-    "vue-meta": "^2.4.0"
+    "@nuxtjs/google-analytics": "^2.4.0",
+    "core-js": "^3.8.3",
+    "nuxt": "^2.14.12"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@vue/cli-plugin-babel": "^4.3.0",
-    "@vue/cli-plugin-eslint": "^4.3.0",
-    "@vue/cli-service": "^4.3.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "husky": "^4.3.0",
-    "lint-staged": "^10.5.1",
-    "prettier": "^2.1.2",
-    "vue-template-compiler": "^2.6.11"
+    "@nuxtjs/tailwindcss": "^3.4.2",
+    "@tailwindcss/postcss7-compat": "^2.0.3",
+    "autoprefixer": "^9",
+    "highlight.js": "^10.6.0",
+    "husky": "^5.0.9",
+    "lint-staged": "^10.5.4",
+    "postcss": "^7",
+    "prettier": "^2.2.1",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+    "vue-backtotop": "^1.6.1",
+    "vue-clipboard2": "^0.3.1"
   },
   "husky": {
     "hooks": {
@@ -41,24 +35,5 @@
     "*.{js,css,md}": [
       "prettier --tab-width 4 --jsx-bracket-same-line true --write"
     ]
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+  }
 }

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="{ 'dark' : darkMode }">
-        <div class="bg-white dark:bg-gray-900 font-roboto" id="app">
+        <div class="bg-white dark:bg-gray-900 font-roboto">
             <header-component></header-component>
             <main-component></main-component>
 
@@ -25,9 +25,9 @@
 </template>
 
 <script>
-import AppButton from "@/components/utilities/AppButton.vue";
-import HeaderComponent from "./components/Header";
-import MainComponent from "./components/Main";
+import AppButton from "~/components/utilities/AppButton.vue";
+import HeaderComponent from "~/components/Header";
+import MainComponent from "~/components/Main";
 import BackToTop from "vue-backtotop";
 
 export default {
@@ -36,45 +36,14 @@ export default {
     data() {
         return {
             darkMode: JSON.parse(localStorage.getItem("darkMode")) || false,
-            og: "https://merakiui.com" + require("./assets/merakiui-og.png"),
         };
     },
 
-    metaInfo() {
-        return {
-            meta: [
-                { name: "twitter:card", content: "summary_large_image" },
-                { name: "twitter:title", content: "Meraki UI Tailwindcss Components" },
-                {
-                  name: "twitter:description",
-                  content:
-                    "Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
-                },
-                { name: "twitter:image", content: this.og },
-                { property: "og:title", content: "Meraki UI Tailwindcss Components" },
-                { property: "og:site_name", content: "Meraki UI" },
-                { property: "og:type", content: "website" },
-                { property: "og:image", content: this.og },
-                {
-                  property: "og:description",
-                  content:
-                    "Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
-                },
-            ],
-        };
-    },
-
-    mounted() {
-        this.$ga.page("/");
-    },
-
     watch: {
-		darkMode() {
-			localStorage.setItem("darkMode", this.darkMode);
-			console.log('Night Mode: ' + this.darkMode);
-		}
+      darkMode() {
+        localStorage.setItem("darkMode", this.darkMode);
+        console.log('Night Mode: ' + this.darkMode);
+      }
 	},
 };
 </script>
-
-<style src="./assets/css/app.css"></style>

plugins/vue-clipboard.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueClipboard from 'vue-clipboard2'
+
+Vue.use(VueClipboard)

postcss.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-    plugins: [
-        require("postcss-import"),
-        require("tailwindcss"),
-        require("autoprefixer"),
-    ],
-};

public/_redirects

@@ -1,2 +0,0 @@
-# Netlify settings for single-page application
-/*    /index.html   200

public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>Meraki UI Tailwindcss Components</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

src/main.js

@@ -1,20 +0,0 @@
-import Vue from "vue";
-import App from "./App.vue";
-import Meta from "vue-meta";
-import VueClipboard from "vue-clipboard2";
-import VueAnalytics from "vue-analytics";
-import ViewComponent from "./components/utilities/ViewComponent";
-
-Vue.use(Meta);
-
-Vue.component("view-component", ViewComponent);
-
-Vue.config.productionTip = false;
-
-Vue.use(VueClipboard);
-
-Vue.use(VueAnalytics, { id: "UA-167213766-1" });
-
-console.log("Hello 😎, If you like it star it on Github 🚀");
-
-new Vue({ render: (h) => h(App) }).$mount("#app");

tailwind.config.js

@@ -1,5 +1,10 @@
 module.exports = {
-    purge: ["./src/**/*.vue"],
+    purge: [
+        './components/**/*.{vue,js}',
+        './layouts/**/*.vue',
+        './pages/**/*.vue',
+        './nuxt.config.{js,ts}',
+    ],
     darkMode: "class",
     theme: {
         extend: {