feat(examples): add nuxt-layer example

gitsindonesia · Feb 2, 2023 · c6aafd9 · c6aafd9
1 parent 00389d1
commit c6aafd9
Show file tree

Hide file tree

Showing 10 changed files with 6,574 additions and 0 deletions.
diff --git a/examples/nuxt-layer/.gitignore b/examples/nuxt-layer/.gitignore
@@ -0,0 +1,9 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.vercel
diff --git a/examples/nuxt-layer/README.md b/examples/nuxt-layer/README.md
@@ -0,0 +1,37 @@
+# nuxt-layer-app
+
+This is a minimal app created by running `npx create-gits-app`. This project uses the following technologies for a great developer and user-experience:
+
+- [TypeScript](https://www.typescriptlang.org/)
+- [Nuxt 3](https://nuxt.com)
+- GITS UI
+
+### Setup
+
+Make sure to install the dependencies:
+
+```bash
+npm install
+```
+
+### Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+npm run dev
+```
+
+### Production
+
+Build the application for production:
+
+```bash
+npm run build
+```
+
+Locally preview production build:
+
+```bash
+npm run preview
+```
diff --git a/examples/nuxt-layer/app.vue b/examples/nuxt-layer/app.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const title = 'Nuxt + GITS UI Minimal Starter';
+
+useHead({
+  title,
+  htmlAttrs: {
+    lang: 'en',
+  },
+  meta: [
+    {
+      name: 'description',
+      key: 'description',
+      content: title,
+    },
+  ],
+});
+</script>
+
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
diff --git a/examples/nuxt-layer/components/Welcome.vue b/examples/nuxt-layer/components/Welcome.vue
@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <main
+      class="container mx-auto p-6 flex items-center justify-center h-screen"
+    >
+      <div class="space-y-12">
+        <div class="space-y-3 text-center">
+          <h1 class="font-bold text-5xl space-x-3">
+            <span
+              class="
+                bg-gradient-to-r
+                from-green-500
+                to-cyan-500
+                bg-clip-text
+                text-transparent
+              "
+            >
+              Nuxt.js
+            </span>
+            <span class="font-thin text-gray-700">+</span>
+            <span
+              class="
+                bg-gradient-to-r
+                from-primary-500
+                to-indigo-500
+                bg-clip-text
+                text-transparent
+              "
+            >
+              GITS UI
+            </span>
+          </h1>
+          <p class="text-gray-600 text-lg">
+            A minimal Nuxt.js + GITS UI starter template
+          </p>
+        </div>
+
+        <p class="text-xl text-center">
+          Get started by editing
+          <code class="px-2 py-1 rounded bg-gray-100">app.vue</code>
+        </p>
+        <div>
+          <div class="grid grid-cols-2 gap-6">
+            <a
+              href="https://gitsindonesia.github.io/ui-component/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <VCard>
+                <template #header>
+                  <h3>Documentation &rarr;</h3>
+                </template>
+                <p>Find in-depth information about GITS UI features and API.</p>
+              </VCard>
+            </a>
+
+            <a
+              href="https://nuxt.com"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <VCard>
+                <template #header>
+                  <h3>Nuxt &rarr;</h3>
+                </template>
+                <p>Learn about Nuxt.js</p>
+              </VCard>
+            </a>
+
+            <a
+              href="https://github.com/gitsindonesia/ui-component/tree/main/starter"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <VCard>
+                <template #header>
+                  <h3>Starter &rarr;</h3>
+                </template>
+                <p>Discover and deploy boilerplate example GITS UI projects.</p>
+              </VCard>
+            </a>
+
+            <a
+              href="https://nuxt.com/docs/getting-started/deployment"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <VCard>
+                <template #header>
+                  <h3>Deploy &rarr;</h3>
+                </template>
+                <p>
+                  Instantly deploy your Nuxt site to a public URL with Vercel.
+                </p>
+              </VCard>
+            </a>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
diff --git a/examples/nuxt-layer/nuxt.config.ts b/examples/nuxt-layer/nuxt.config.ts
@@ -0,0 +1,16 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ['@gits-id/ui-nuxt', '@nuxtjs/tailwindcss'],
+  typescript: {
+    shim: false,
+  },
+  extends: [
+    "@gits-id/nuxt-auth",
+    "@gits-id/nuxt-admin",
+  ],
+  vite: {
+    optimizeDeps: {
+      include: ['yup']
+    }
+  }
+});
diff --git a/examples/nuxt-layer/package.json b/examples/nuxt-layer/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "@gits-id/nuxt-minimal",
+  "description": "Lightweight Nuxt.js template with GITS UI",
+  "version": "0.1.0",
+  "keywords": [
+    "admin",
+    "dashboard",
+    "template",
+    "nuxt",
+    "nuxt.js",
+    "vue",
+    "vue.js",
+    "gits",
+    "gits-id",
+    "gits-ui"
+  ],
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@gits-id/nuxt-admin": "^0.1.2",
+    "@gits-id/nuxt-auth": "^0.1.3",
+    "@gits-id/ui-nuxt": "^0.15.2"
+  },
+  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.3.0",
+    "nuxt": "^3.1.1",
+    "sass": "^1.58.0"
+  },
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "files": [
+    "components/",
+    "pages/",
+    "app.vue",
+    "app.config.ts",
+    "nuxt.config.ts",
+    "tailwind.config.js"
+  ]
+}
diff --git a/examples/nuxt-layer/pages/index.vue b/examples/nuxt-layer/pages/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <Welcome />
+</template>
diff --git a/examples/nuxt-layer/tailwind.config.js b/examples/nuxt-layer/tailwind.config.js
@@ -0,0 +1,49 @@
+const colors = require('tailwindcss/colors');
+
+// default GITS Color
+const primary = {
+  DEFAULT: '#28A0F6',
+  50: '#D8EEFD',
+  100: '#C5E5FD',
+  200: '#9DD4FB',
+  300: '#76C3F9',
+  400: '#4FB1F8',
+  500: '#28A0F6',
+  600: '#0984DD',
+  700: '#0764A7',
+  800: '#054471',
+  900: '#02233B',
+};
+
+// default GITS Color
+const secondary = {
+  DEFAULT: '#FF8B49',
+  50: '#FFFFFF',
+  100: '#FFF3EC',
+  200: '#FFD9C3',
+  300: '#FFBF9B',
+  400: '#FFA572',
+  500: '#FF8B49',
+  600: '#FF6711',
+  700: '#D84E00',
+  800: '#A03A00',
+  900: '#682600',
+};
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./node_modules/@gits-id/**/src/**/*.{vue,js,ts,jsx,tsx,css}'],
+  theme: {
+    extend: {
+      colors: {
+        primary,
+        secondary,
+        info: colors.sky,
+        success: colors.emerald,
+        warning: colors.yellow,
+        error: colors.rose,
+      },
+    },
+  },
+  presets: [require('@gits-id/tailwind-config/preset')],
+};
diff --git a/examples/nuxt-layer/tsconfig.json b/examples/nuxt-layer/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}