Project Setup

Author: tutaru99

.env.example

@@ -0,0 +1 @@
+API_BASE_URL=""

README.md

@@ -0,0 +1,73 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+Node version used - v21.4.0
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+
+## Environment Variables
+
+Add these to .env file
+
+```bash
+# A root endpoint to the API backend server
+API_BASE_URL = ""
+```

app.vue

@@ -0,0 +1,18 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<style>
+/* Page transition when routing */
+.page-enter-active,
+.page-leave-active {
+  transition: all 0.3s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  filter: blur(1rem);
+}
+</style>

assets/css/_base.css

@@ -0,0 +1,49 @@
+html {
+  min-height: 100%;
+}
+
+body {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+  padding: 0;
+  color: var(--color-text);
+  font-weight: var(--body-font-weight);
+  font-size: var(--body-font-size);
+  font-family: var(--body-font-family);
+  line-height: 1.5;
+  background-color: var(--site-background-color);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  scroll-behavior: smooth;
+  transition:
+    background-color 0.5s,
+    color 0.5s;
+
+  &.no-scroll {
+    height: 100%;
+    overflow: hidden !important;
+  }
+}
+
+/* docking footer at the bottom of the page */
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  margin: 0;
+}
+
+main {
+  flex: 1;
+  width: 100%;
+}
+
+table {
+  max-width: 100%;
+}
+
+img#concept-pixel {
+  display: none;
+}