feat: add starter code

Author: bencodezen

.gitignore

@@ -0,0 +1,10 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env
+dist
+.DS_Store
+node_modules

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

README.md

@@ -0,0 +1,34 @@
+# Nuxt 3 Middleware (Vue Mastery Course)
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+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
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,14 @@
+<script setup>
+useHead({
+  link: [
+    { rel: 'stylesheet', href: '/css/pico.min.css' },
+    { rel: 'stylesheet', href: '/css/custom.css' }
+  ]
+})
+</script>
+
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

components/LoginForm.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const isAuthenticated = useCookie('is-authenticated')
+const currentUser = useCookie('current-user')
+
+const router = useRouter()
+
+const userInput = ref({
+  username: '',
+  password: ''
+})
+
+const loginUser = () => {
+  if (
+    userInput.value.username.length > 0 &&
+    userInput.value.password.length > 0
+  ) {
+    isAuthenticated.value = 'true'
+    currentUser.value = userInput.value.username
+    router.push('/profile/' + userInput.value.username)
+  }
+}
+</script>
+
+<template>
+  <form @submit.prevent>
+    <input
+      v-model="userInput.username"
+      type="text"
+      name="username"
+      placeholder="Username"
+      aria-label="Username"
+      autocomplete="username"
+      required
+    />
+    <input
+      v-model="userInput.password"
+      type="password"
+      name="password"
+      placeholder="Password"
+      aria-label="Password"
+      autocomplete="current-password"
+      required
+    />
+    <button @click="loginUser" type="submit" class="contrast">Login</button>
+  </form>
+</template>
+
+<style lang="scss" scoped></style>

components/TheFooter.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts"></script>
+
+<template>
+  <footer class="container-fluid">
+    <small>
+      Built with <a href="https://picocss.com" class="secondary">Pico</a> •
+      <a href="" class="secondary"> Source code </a>
+    </small>
+  </footer>
+</template>
+
+<style lang="scss" scoped></style>

components/TheHeader.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts"></script>
+
+<template>
+  <nav class="container-fluid">
+    <ul>
+      <li>
+        <nuxt-link to="/" class="contrast">
+          <strong>Vue Mastery's Nuxt 3 Middleware</strong>
+        </nuxt-link>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<style lang="scss" scoped></style>

layouts/default.vue

@@ -0,0 +1,9 @@
+<template>
+  <div id="default-layout">
+    <TheHeader />
+    <main class="container">
+      <slot />
+    </main>
+    <TheFooter />
+  </div>
+</template>

nuxt.config.ts

@@ -0,0 +1,2 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({})