ez deploy

Dockerfile

@@ -0,0 +1,30 @@
+# This dockerfile is to turn .output into a docker image
+# You still need to install the project on your machine and build it.
+# Only then you run this docker file
+
+# This project by default uses pnpm.
+# If you wish to use npm, delete "pnpm-lock.yaml" first.
+
+# 1. pnpm (or npm) i # If you get GNU problems, use pnpm (or npm) i --force
+# 2. pnpm (or npm) run build # Sit back while it compiles
+# 3. sudo docker build . -t myapp:latest (replace 'myapp' to whatever tag you wanna give your image)
+
+# You should have the image now !
+# Now you just need to create the container
+
+# Here is an example command for creating a container
+# sudo docker run -d --name myappcontainer --network host -e PORT=3000 myapp:latest
+
+FROM node:22-alpine
+WORKDIR /app
+
+# Copy the build's result
+COPY .output/ .
+
+# Change the port and host
+ENV PORT=3000
+ENV HOST=0.0.0.0
+
+EXPOSE 3000
+
+CMD ["node", "/app/server/index.mjs"]

README.md

@@ -7,69 +7,37 @@ Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduct
 Make sure to install dependencies:
 
 ```bash
-# npm
+npm i -g pnpm # (updates your pnpm :D)
-npm install
-
-# pnpm
 pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
 ```
+(this project uses PNPM)
 
 ## Development Server
 
 Start the development server on `http://localhost:3000`:
 
 ```bash
-# npm
-npm run dev
-
-# pnpm
 pnpm dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
 ```
 
-## Production
+## Deployment
-
-Build the application for production:
 
 ```bash
-# npm
-npm run build
-
-# pnpm
 pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
 ```
 
 Locally preview production build:
 
 ```bash
-# npm
-npm run preview
-
-# pnpm
 pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
 ```
 
+Start the production server
+```bash
+node .output/server/index.mjs
+```
+
+### Check out the docker file to turn your app into a container for easy deployment!
+
+
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/assets/css/global.css

@@ -1,2 +1,20 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+
+:root {
+  --font-sans: 'Public Sans', sans-serif;
+  --ui-bg: rgb(220,220,220);
+}
+.dark {
+  /*--ui-bg: var(--ui-color-neutral-950);*/
+  --ui-bg: rgb(17,17,17);
+  --ui-bg-accented: rgba(189, 23, 255, 0.3);
+  --ui-bg-elevated: rgba(189, 23, 255, 0.2);
+
+  --ui-primary: rgb(189, 23, 255);
+}
+
+.dark-widget-bg {
+    --ui-bg-elevated: rgb(34, 24, 32);
+    --ui-bg-accented: rgb(22,22,22);
+  }

app/components/dashboard/sidebar.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { NavigationMenuItem } from '@nuxt/ui'
+//import Logo from '@nuxt/ui'
 
 
-const items: NavigationMenuItem[][] = [[{
+const items_def: NavigationMenuItem[][] = [
+[{
   label: 'Home',
   icon: 'i-lucide-house',
   active: true
@@ -35,13 +37,20 @@ const items: NavigationMenuItem[][] = [[{
   to: 'https://github.com/nuxt/ui',
   target: '_blank'
 }]]
+
+const props = defineProps<{
+  items? : NavigationMenuItem[][]
+}>()
+
+const items: NavigationMenuItem[][] = props.items ?? items_def;
 </script>
 
 
 <template>
+
   <UDashboardSidebar collapsible resizable :ui="{ footer: 'border-t border-default' }">
     <template #header="{ collapsed }">
-      <Logo v-if="!collapsed" class="h-5 w-auto shrink-0" />
+      <AppLogo icon="i-simple-icons-nuxtdotjs" text="Nuxt" v-if="!collapsed" name="i-simple-icons-nuxtdotjs" class="h-5 w-auto shrink-0" />
       <UIcon v-else name="i-simple-icons-nuxtdotjs" class="size-5 text-primary mx-auto" />
     </template>
 

app/layouts/dashboard.vue

@@ -1,6 +1,32 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from '@nuxt/ui'
+
+const nav : NavigationMenuItem[][] = [[
+  {
+  label: 'Home',
+  icon: 'i-lucide-house',
+  active: true,
+  to: "/dashboard"
+}, {
+  label: 'Inbox',
+  icon: 'i-lucide-inbox',
+  badge: '4',
+  to: "/inbox"
+}, {
+  label: 'Contacts',
+  icon: 'i-lucide-users',
+  to: "/contacts"
+}]];
+/*[
+  {
+    label: "Feedback"
+  }
+]];*/
+</script>
 <template>
   <UDashboardGroup>
-    <DashboardSidebar />
+    <DashboardSidebar collapsible resizable :items="nav"/>
+    <UDashboardSidebarCollapse />
 
     <slot />
   </UDashboardGroup>

app/pages/dashboard.vue

@@ -1,16 +1,154 @@
 <script lang="ts" setup>
+import type { TableColumn } from "@nuxt/ui"
+import { h } from 'vue'
+
   definePageMeta({
     layout: "dashboard"
   });
+  const color = useColorMode();
+  color.preference = "dark";
+
+  const cards: any[] = [
+    {
+      title: "1",
+      icon: "meteor-icons:chevron-up",
+      desc: "epah ya bro"
+    },
+    {
+      title: "2",
+      icon: "majesticons:award",
+      desc: "bolinhas de natal ou whatever"
+    },
+    {
+      title: "3",
+      icon: "svg-spinners:clock",
+      desc: "espera aí um becs bro"
+    },
+
+  ];
+  // create the object itself
+  type Payment = {
+    id: string,
+    date: string,
+    status: string,
+    email: string,
+    amount: number
+
+  }
+  const table_demo = ref<Payment[]>([
+    {
+      id: '4600',
+      date: '2024-03-11T15:30:00',
+      status: 'paid',
+      email: 'james.anderson@example.com',
+      amount: 594
+    },
+    {
+      id: '4599',
+      date: '2024-03-11T10:10:00',
+      status: 'failed',
+      email: 'mia.white@example.com',
+      amount: 276
+    },
+    {
+      id: '4598',
+      date: '2024-03-11T08:50:00',
+      status: 'refunded',
+      email: 'william.brown@example.com',
+      amount: 315
+    },
+    {
+      id: '4597',
+      date: '2024-03-10T19:45:00',
+      status: 'paid',
+      email: 'emma.davis@example.com',
+      amount: 529
+    },
+    {
+      id: '4596',
+      date: '2024-03-10T15:55:00',
+      status: 'paid',
+      email: 'ethan.harris@example.com',
+      amount: 639
+    }
+  ])
+
+  const table_headers: TableColumn<Payment>[] = [
+    {
+      accessorKey: 'id',
+      header: "ID",
+      cell: ({ row }) => `#${row.getValue('id')}`
+    },
+    {
+      accessorKey: 'date',
+      header: "Date",
+      cell: ({ row }) => {
+        return new Date(row.getValue('date')).toLocaleString("pt-PT",{
+          day: "numeric",
+          month: "short",
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: false
+        })
+      }
+    },
+    {
+      accessorKey: 'status',
+      header: "Status",
+      cell: ({row}) => {
+        let color: string;
+        switch(row.getValue('status')){
+          case "paid":
+            color = "success"; break;
+          case "failed":
+            color = "error"; break;
+          case "refunded":
+            color = "warning"; break;
+          default:
+            color = "neutral";
+        }
+        return h(UBadge, { class: "capitalize", variant: "subtle", color },
+            () => row.getValue("status"))
+        }
+    },
+    {
+      accessorKey: 'amount',
+      header: "Ammount",
+      cell: ({ row }) => { return "€" + row.getValue('amount') }
+    }
+  ]
+
 </script>
 
 <template>
-  <div>
+  <UContainer>
     
+    <UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>
+
+    <div class="mt-1 mb-3 flex flex-col w-full relative z-0">
+      <ProseH2 class="text-center m-0.5 w-full">Hey there, user!</ProseH2>
+      <ProseP class="text-center text-muted m-0.5">Welcome to the UI!</ProseP>
+      <UBadge variant="subtle" class="inline mx-auto">It's cool, isn't it ?</UBadge> 
     </div>
     
+    <!--<div class="mx-auto max-w-220">-->
+      <UPageGrid class="lg:grid-cols-3 lg:gap-0 not-lg:gap-3">
+          <UPageCard 
+            v-for="card in cards"
+            :title="card.title"
+            :description="card.desc"
+            :icon="card.icon"
+            variant="subtle"
+            class="dark-widget-bg col-lg lg:rounded-none first:lg:rounded-l-2xl last:lg:rounded-r-2xl  sm:rounded-2xl"
+          />
+      </UPageGrid>
+
+
+    <UTable :data="table_demo" :columns="table_headers"/>
+  </UContainer>
 </template>
 
-<style>
+<style scoped>
+@import "bootstrap/dist/css/bootstrap-grid.css";
 
 </style>

app/pages/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="flex flex-col">
+    <UButton
+      to="/dashboard"
+      target="_self"
+      variant="outline"
+      class="mx-auto mt-5">Go to dashboard
+  
+    </UButton>
+  </div>
+</template>
+
+<script lang="js">
+
+</script>
+
+<style>
+
+</style>

nuxt.config.ts

@@ -8,7 +8,7 @@ export default defineNuxtConfig({
     modules: ['@nuxt/image', '@nuxt/ui', '@nuxt/test-utils', '@nuxtjs/mdc'],
     vite: {
         plugins: [
-            tailwindcss(),
+            tailwindcss()
         ],
     },
 })

package.json

@@ -17,6 +17,7 @@
     "@tailwindcss/vite": "^4.1.17",
     "@vueuse/core": "^14.0.0",
     "@vueuse/head": "github:vueuse/head",
+    "bootstrap": "^5.3.8",
     "nuxt": "^4.2.1",
     "nuxt-storm": "^1.1.3",
     "tailwindcss": "^4.1.17",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@vueuse/head':
         specifier: github:vueuse/head
         version: https://codeload.github.com/vueuse/head/tar.gz/7dde2cbc097f2c8878977826f257a233289165c0(vue@3.5.24(typescript@5.9.3))
+      bootstrap:
+        specifier: ^5.3.8
+        version: 5.3.8(@popperjs/core@2.11.8)
       nuxt:
         specifier: ^4.2.1
         version: 4.2.1(@parcel/watcher@2.5.1)(@vue/compiler-sfc@3.5.24)(db0@0.3.4)(ioredis@5.8.2)(lightningcss@1.30.2)(magicast@0.5.1)(rollup@4.53.3)(terser@5.44.1)(typescript@5.9.3)(vite@7.2.4(jiti@1.21.7)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.1))(yaml@2.8.1)
@@ -1127,6 +1130,9 @@ packages:
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
+  '@popperjs/core@2.11.8':
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+
   '@poppinss/colors@4.1.5':
     resolution: {integrity: sha512-FvdDqtcRCtz6hThExcFOgW0cWX+xwSMWcRuQe5ZEb2m7cVQOAVZOIMt+/v9RxGiD9/OY16qJBXK4CVKWAPalBw==}
 
@@ -1879,6 +1885,11 @@ packages:
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
+  bootstrap@5.3.8:
+    resolution: {integrity: sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==}
+    peerDependencies:
+      '@popperjs/core': ^2.11.8
+
   brace-expansion@1.1.12:
     resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
@@ -6220,6 +6231,8 @@ snapshots:
 
   '@polka/url@1.0.0-next.29': {}
 
+  '@popperjs/core@2.11.8': {}
+
   '@poppinss/colors@4.1.5':
     dependencies:
       kleur: 4.1.5
@@ -6959,6 +6972,10 @@ snapshots:
 
   boolbase@1.0.0: {}
 
+  bootstrap@5.3.8(@popperjs/core@2.11.8):
+    dependencies:
+      '@popperjs/core': 2.11.8
+
   brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2