feat: refactoring the project in Nuxt

Author: Salvatore Laisa

.github/workflows/build.yml

@@ -1,29 +1,40 @@
-name: Deploy React App to GH pages
+name: Build & deploy
 
 on:
   push:
     branches: [main]
 
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
 jobs:
   build:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [20.12]
+        node-version: [22.10]
 
     steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - name: 💻 Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
-      - run: npm ci
-      - run: npm test
-      - run: npm run build
 
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
+      - name: 📦 Install dependencies
+        run: npm ci
+
+      - name: 🏗️ Build static website
+        run: npm run build:gh
+
+      - name: 🚀 Upload artifact 
+        uses: actions/upload-pages-artifact@v3
         with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./dist
+          path: .output/public
+
+      - name: 🏁 Deploy to GitHub Pages
+        id: gh-pages
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,25 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
 # Logs
 logs
 *.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-coverage
-node_modules
-dist
-dist-ssr
-*.local
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
+# Misc
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -70,11 +70,9 @@ open a browser at `http://localhost:3000` and you will see the application.
 
 ### What has been used
 
-- [Vue 3](https://vuejs.org/) - component framework
-- [Typescript](https://www.typescriptlang.org/) - static typed Javascript
+- [Nuxt 3](https://nuxt.com/) - main application framework based on [Vue 3](https://vuejs.org/)
 - [Pinia](https://pinia.vuejs.org/) - state management
-- [Vite.js](https://vitejs.dev/) - project bootstrap and tooling
-- [Vitest](https://vitest.dev/) - unit testing
+<!-- - [Vitest](https://vitest.dev/) - unit testing -->
 - [TailwindCSS](https://tailwindcss.com/) - CSS as utilility classes
 - [DaisyUI](https://daisyui.com/) - UI components built on top of TailwindCSS
 

app.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { hasData, load } from "./libs/storage";
+
+const app = useMainStore();
+
+onMounted(() => {
+  if (hasData()) {
+    app.setState(load());
+    document.querySelector("html")?.setAttribute("data-theme", app.theme);
+  }
+});
+
+useHead({
+  title: "Subscriptions Tracker ⚠️",
+  meta: [
+    { name: "description", content: "Webapp to keep track on subscriptions fees and have some math done for you." },
+    { name: "theme-color", content: "#ffffff" },
+    { name: "viewport", content: "width=device-width, initial-scale=1.0" },
+    { name: "title", content: "Subscriptions Tracker ⚠️" },
+  ],
+  link: [
+    {
+      rel: "icon",
+      type: "image/svg+xml",
+      href: "/favicon.svg",
+    },
+    {
+      rel: "icon",
+      type: "image/png",
+      sizes: "32x32",
+      href: "/static/favicons/favicon-32x32.png",
+    },
+  ],
+  htmlAttrs: {
+    lang: "it-IT",
+    "data-theme": "light",
+    // class: document && document.documentElement.classList.contains("dark") ? "dark" : "light",
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col h-screen">
+    <Header />
+    <NuxtPage />
+    <Footer />
+  </div>
+</template>

src/components/Backup.vue renamed to components/Backup.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useMainStore } from "./../store";
 import { save } from "./../libs/storage";
 
 const app = useMainStore();

src/components/Container.vue renamed to components/Container.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import Container from "./Container.vue";
-import Stat from "./Stat.vue";
-
-import { Subscription } from "../libs/types";
+import type { Subscription } from "../libs/types";
 import { getInactives, getMonthlyCost, getYearlyCost, getTranslation } from "./../libs";
-import { useMainStore } from "../store";
 
 defineProps<{
   data: Subscription[];

src/components/Dashboard.vue renamed to components/Dashboard.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import Container from "./Container.vue";
-import { useMainStore } from "./../store";
 import { save } from "./../libs/storage";
 
 const app = useMainStore();

src/components/Empty.vue renamed to components/Empty.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { ref, Ref } from "vue";
+import { ref, type Ref } from "vue";
 // import { format } from "date-fns";
-
 import { formatDate } from "../libs";
-import { Subscription } from "../libs/types";
+import type { Subscription } from "../libs/types";
 
 const emit = defineEmits<{
   (e: "add-item", item: Subscription): void;

src/components/Footer.vue renamed to components/Footer.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useMainStore } from "./../store";
 import { save } from "./../libs/storage";
 
 const app = useMainStore();

src/components/Form.vue renamed to components/Form.vue

@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { Subscription } from "../libs/types";
-import { useMainStore } from "./../store";
+import type { Subscription } from "../libs/types";
 import { save } from "./../libs/storage";
 
-import Container from "./Container.vue";
-import Backup from "./Backup.vue";
-
 const app = useMainStore();
 const i18n = app.i18n.main;
 const fbText = "Sure you want to delete all subscriptions data?";

src/components/Header.vue renamed to components/Header.vue

@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  devtools: { enabled: true },
+  modules: ['@pinia/nuxt', '@nuxtjs/tailwindcss'],
+})