Initial nuxt template

.gitignore

@@ -0,0 +1,26 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+pnpm-lock.yaml

README.md

@@ -0,0 +1,75 @@
+# Nuxt Content Starter
+
+Look at the [Nuxt Content documentation](https://content.nuxt.com) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## 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
+
+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
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/app.vue

@@ -0,0 +1,4 @@
+<template>
+  <NuxtRouteAnnouncer />
+  <NuxtPage />
+</template>

app/components/Alert.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="alert" :style="{ 'border-color': color }">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { color } = defineProps({
+  color: {
+    type: String,
+    default: 'orange'
+  }
+})
+</script>
+
+<style scoped>
+.alert {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  border: 2px solid;
+  border-radius: 0.5rem;
+  background-color: #fff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.alert:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+</style>

app/components/Counter.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h3>Counter: {{ count }}</h3>
+    <button @click="increment">
+      Increment
+    </button>
+    <button @click="decrement">
+      Decrement
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const count = ref(0)
+
+const increment = () => {
+  count.value++
+}
+
+const decrement = () => {
+  count.value--
+}
+</script>
+
+<style scoped>
+button {
+  margin: 5px;
+}
+</style>

app/pages/[...slug].vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const route = useRoute()
+
+const { data: page } = await useAsyncData('page-' + route.path, () => {
+  return queryCollection('content').path(route.path).first()
+})
+
+if (!page.value) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
+}
+</script>
+
+<template>
+  <ContentRenderer
+    v-if="page"
+    :value="page"
+  />
+</template>

content.config.ts

@@ -0,0 +1,10 @@
+import { defineContentConfig, defineCollection } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    content: defineCollection({
+      type: 'page',
+      source: '**',
+    }),
+  },
+})

content/about.md

@@ -0,0 +1,3 @@
+# About Content Version 3
+
+[Back home](/)

content/index.md

@@ -0,0 +1,24 @@
+# Welcome to Nuxt Content Starter
+
+This is the main page displaying Markdown located at [content/index.md](https://github.com/nuxt/starter/blob/content/content/index.md).
+
+Move to [about](/about) page.
+
+## Manage your Contents
+
+Create new pages or modify the existing ones in `content/` directory.
+
+## Query & Render Pages
+
+You can find an example of querying contents and rendering them in a [catch-all page](https://github.com/nuxt/starter/blob/content/app/pages/%5B...slug%5D.vue)
+
+## Integrate Vue Component
+
+::alert{color="green"}
+The current [alert](https://github.com/nuxt/starter/blob/content/app/components/Alert.vue) and the [counter](https://github.com/nuxt/starter/blob/content/app/components/Counter.vue) below are `Vue` components integrated into the Markdown.
+::
+
+::counter
+::
+
+Checkout out the [documentation](https://content.nuxt.com/docs/getting-started) to learn more.

nuxt.config.ts

@@ -0,0 +1,11 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/content',
+    '@nuxt/fonts',
+    '@nuxt/image',
+    '@nuxt/icon',
+  ],
+  devtools: { enabled: true },
+  compatibilityDate: '2024-04-03',
+})

package.json

@@ -0,0 +1,19 @@
+{
+    "name": "pumpkin-blog",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview"
+    },
+    "dependencies": {
+        "@nuxt/content": "^3.11.0",
+        "@nuxt/fonts": "^0.13.0",
+        "@nuxt/icon": "^2.2.1",
+        "@nuxt/image": "^2.0.0",
+        "better-sqlite3": "^12.6.2",
+        "nuxt": "^4.3.0"
+    }
+}

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}