Merge branch 'nuxt:main' into main

Author: Archetipo95

.github/workflows/nuxthub.yml

@@ -0,0 +1,40 @@
+name: Deploy to NuxtHub
+on: push
+
+jobs:
+  deploy:
+    name: Deploy to NuxtHub
+    runs-on: ubuntu-latest
+    environment:
+      name: ${{ github.ref == 'refs/heads/main' && 'production' || 'preview' }}
+      url: ${{ steps.deploy.outputs.deployment-url }}
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Ensure NuxtHub module is installed
+        run: pnpx nuxthub@latest ensure
+
+      - name: Build application
+        run: pnpm build
+
+      - name: Deploy to NuxtHub
+        uses: nuxt-hub/action@v1
+        id: deploy
+        with:
+          project-key: learn-nuxt-com-5jju

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "antfu.pnpm-catalog-lens",
+    "dbaeumer.vscode-eslint",
+    "vue.volar"
+  ]
+}

.vscode/settings.json

@@ -1,7 +1,4 @@
 {
-  // Enable the ESlint flat config support
-  "eslint.experimental.useFlatConfig": true,
-
   // Disable the default formatter, use eslint instead
   "prettier.enable": false,
   "editor.formatOnSave": false,

README.md

@@ -5,19 +5,20 @@
 
 An interactive tutorial and playground for learning Nuxt. Powered by [Nuxt](https://nuxt.com/docs) and [WebContainers](https://webcontainers.io/).
 
-Inspired by [learn.svelte.dev](https://learn.svelte.dev).
+[📖 learn.nuxt.com](https://learn.nuxt.com).
 
-`learn.nuxt.com` is not yet deployed, but you can preview the latest branch at [learn-dev.nuxt.com](https://learn-dev.nuxt.com).
+> Inspired by [learn.svelte.dev](https://learn.svelte.dev).
 
-## Live Streaming
+## Project Development Process
 
-Anthony Fu built this project from scratch on Live Streaming. You can watch the recordings of the full process on [YouTube](https://www.youtube.com/playlist?list=PL4ETc_mXFfxUGiY852jH3ctljnI2e9Rax).
+Anthony Fu is building this project from scratch on Live Streaming.
+You can watch the recordings of the full process on [YouTube](https://www.youtube.com/playlist?list=PL4ETc_mXFfxUGiY852jH3ctljnI2e9Rax).
 
 ## Contributing
 
 ### Development
 
-To run this project locally, you need to have [Node.js v20.0+](https://nodejs.org/en/) and [pnpm](https://pnpm.io/) installed.
+To run this project locally, you need to have [Node.js v22.0+](https://nodejs.org/en/) and [pnpm](https://pnpm.io/) installed.
 
 After cloning the repo, run the following commands to install dependencies:
 

components/ContentNavCard.vue

@@ -4,7 +4,7 @@ defineProps<{
   icon?: string
   title?: string
   subheader: string
-  description: string
+  description?: string
 }>()
 </script>
 
@@ -19,7 +19,7 @@ defineProps<{
     <div class="my-0 text-lg font-semibold">
       {{ title }}
     </div>
-    <div class="line-clamp line-clamp-2 mb-0 mt-1 text-[14px] op50">
+    <div v-if="description" class="line-clamp line-clamp-2 mb-0 mt-1 text-[14px] op50">
       {{ description }}
       <slot />
     </div>

components/ContentNavItem.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import type { NavItem } from '@nuxt/content'
+import type { ContentNavigationItem } from '@nuxt/content'
 
 const props = withDefaults(
   defineProps<{
-    item: NavItem
+    item: ContentNavigationItem
     level?: number
   }>(),
   {
     level: 0,
   },
 )
 
+const route = useRoute()
 const ui = useUiState()
 
 const resolved = computed(() => {
@@ -25,7 +26,7 @@ const paddingLeft = computed(() => `${0.5 + props.level * 0.8}rem`)
 <template>
   <div class="content-nav-item">
     <template v-if="resolved.children?.length">
-      <details :open="$route.path.includes(resolved._path)">
+      <details :open="route.path.includes(resolved.path)">
         <summary>
           <div
             flex="~ gap-1 items-center" cursor-pointer select-none px1 py0.5
@@ -41,18 +42,20 @@ const paddingLeft = computed(() => `${0.5 + props.level * 0.8}rem`)
         </summary>
         <div v-if="resolved.children?.length">
           <ContentNavItem
-            v-for="child in resolved.children"
-            :key="child.url" :item="child" :level="props.level + 1"
+            v-for="child of resolved.children"
+            :key="child.path"
+            :item="child"
+            :level="props.level + 1"
           />
         </div>
       </details>
     </template>
     <NuxtLink
       v-else
-      :to="resolved._path"
+      :to="resolved.path"
       px1 py0.5
       :style="{ paddingLeft }"
-      :class="{ 'text-primary bg-active': resolved._path === $route.path }"
+      :class="{ 'text-primary bg-active': resolved.path === route.path }"
       flex="~ gap-1 items-center"
       hover="text-primary bg-active "
       @click="ui.isContentDropdownShown = false"

components/MainPlayground.vue

@@ -43,6 +43,8 @@ const terminalPaneProps = computed(() => {
   }
 })
 
+const route = useRoute()
+
 // For panes size initialization on SSR
 const isMounted = useMounted()
 const panelInitDocs = computed(() => isMounted.value || {
@@ -73,7 +75,7 @@ const panelInitTerminal = computed(() => isMounted.value || {
       :size="ui.panelDocs" min-size="10"
       :style="panelInitDocs"
     >
-      <PanelDocs />
+      <PanelDocs :key="route.path" />
     </Pane>
     <PaneSplitter />
     <Pane

components/PanelDocs.vue

@@ -1,39 +1,46 @@
 <script setup lang="ts">
-import type { NavItem, ParsedContent } from '@nuxt/content'
+import type { ContentNavigationItem } from '@nuxt/content'
 
 const runtime = useRuntimeConfig()
-const {
-  navigation,
-  page,
-  next,
-  prev,
-} = useContent() as {
-  navigation: Ref<NavItem[]>
-  page: Ref<ParsedContent>
-  next: Ref<ParsedContent | undefined>
-  prev: Ref<ParsedContent | undefined>
-}
+const route = useRoute()
+const { data: page } = useAsyncData(route.path, () => {
+  return queryCollection('tutorials').path(route.path).first()
+})
+const { data: navigation } = useAsyncData(`navigation`, () => {
+  return queryCollectionNavigation('tutorials')
+})
+const { data: surroundings } = useAsyncData(`${route.path}-surroundings`, () => {
+  return queryCollectionItemSurroundings('tutorials', route.path, {
+    fields: ['title', 'description'],
+  })
+})
+
+const prev = computed(() => surroundings.value?.[0])
+const next = computed(() => surroundings.value?.[1])
 
 interface BreadcrumbItem {
   title: string
   path?: string
 }
 
-function findNavItemFromPath(path: string, items = navigation.value): NavItem | undefined {
-  const item = items.find(i => i._path === path)
+function findNavItemFromPath(
+  path: string,
+  items: ContentNavigationItem[] | null = navigation.value,
+): ContentNavigationItem | undefined {
+  const item = items?.find(i => i.path === path)
   if (item)
     return item
 
   const parts = path.split('/').filter(Boolean)
   for (let i = parts.length - 1; i > 0; i--) {
     const parentPath = `/${parts.slice(0, i).join('/')}`
-    const parent = items.find(i => i._path === parentPath)
+    const parent = items?.find(i => i.path === parentPath)
     if (parent)
       return findNavItemFromPath(path, parent.children || [])
   }
 }
 
-const contentPath = computed(() => page.value?._path as string | undefined)
+const contentPath = computed(() => page.value?.path as string | undefined)
 const breadcrumbs = computed(() => {
   const parts = contentPath.value?.split('/').filter(Boolean) || []
   const breadcrumbs = parts
@@ -58,8 +65,8 @@ const breadcrumbs = computed(() => {
 const ui = useUiState()
 
 const sourceUrl = computed(() =>
-  page.value?._file
-    ? `${runtime.public.repoUrl}/edit/main/content/${page.value._file}`
+  page.value?.id
+    ? `${runtime.public.repoUrl}/edit/main/content/${page.value.id}`
     : undefined,
 )
 
@@ -94,24 +101,24 @@ router.beforeEach(() => {
     </div>
     <div relative h-full of-hidden>
       <article ref="docsEl" class="max-w-none prose" h-full of-auto p6>
-        <ContentDoc />
+        <ContentRenderer v-if="page" :key="page.id" :value="page" />
         <div mt8 py2 grid="~ cols-[1fr_1fr] gap-4">
           <div>
             <ContentNavCard
               v-if="prev"
-              :to="prev._path"
+              :to="prev.path"
               :title="prev.title"
-              :description="prev.description"
+              :description="prev.description as string"
               subheader="Previous section"
               icon="i-ph-arrow-left"
             />
           </div>
           <div>
             <ContentNavCard
               v-if="next"
-              :to="next._path"
+              :to="next.path"
               :title="next.title"
-              :description="next.description"
+              :description="next.description as string"
               subheader="Next section"
               icon="i-ph-arrow-right"
               items-end text-right
@@ -137,10 +144,10 @@ router.beforeEach(() => {
           v-if="ui.isContentDropdownShown"
           flex="~ col"
           border="b base"
-          absolute left-0 right-0 top-0 max-h-60vh py2
-          backdrop-blur-10 bg-base important-bg-opacity-80
+
+          absolute left-0 right-0 top-0 max-h-60vh overflow-y-auto py2 backdrop-blur-10 bg-base important-bg-opacity-80
         >
-          <ContentNavItem v-for="item of navigation" :key="item.url" :item="item" />
+          <ContentNavItem v-for="item of navigation" :key="item.path" :item="item" />
         </div>
       </Transition>
     </div>

components/PanelPreview.vue

@@ -77,7 +77,7 @@ function navigate() {
         <span text-sm>Preview</span>
       </div>
       <button
-        v-if="preview.url && guide.features.navigation"
+
         rounded p1
         hover="bg-active"
         title="Refresh Preview"

content.config.ts

@@ -0,0 +1,13 @@
+import { defineCollection, defineContentConfig } from '@nuxt/content'
+
+export default defineContentConfig({
+  collections: {
+    tutorials: defineCollection({
+      type: 'page',
+      source: {
+        include: '**',
+        exclude: ['**/.template/**'],
+      },
+    }),
+  },
+})

content/2.concepts/10.data-fetching/.template/files/app.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { data: todos, refresh } = useFetch('/api/todos')
+</script>
+
+<template>
+  <button type="button" @click="refresh()">
+    Refresh
+  </button>
+
+  <ul>
+    <li v-for="todo in todos" :key="todo.id">
+      {{ todo.title }}
+    </li>
+  </ul>
+</template>

content/2.concepts/10.data-fetching/.template/files/server/api/todos/index.ts

@@ -0,0 +1,7 @@
+export default defineEventHandler(() => {
+  return [
+    { id: 1, title: 'Todo 1' },
+    { id: 2, title: 'Todo 2' },
+    { id: 3, title: 'Todo 3' },
+  ]
+})

content/2.concepts/10.data-fetching/.template/index.ts

@@ -0,0 +1,8 @@
+import type { GuideMeta } from '~/types/guides'
+
+export const meta: GuideMeta = {
+  startingFile: 'app.vue',
+  features: {
+    fileTree: true,
+  },
+}

content/2.concepts/10.data-fetching/.template/solutions/app.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const { data: todos, refresh } = useFetch('/api/todos')
+</script>
+
+<template>
+  <button type="button" @click="refresh()">
+    Refresh
+  </button>
+
+  <ul>
+    <li v-for="todo in todos" :key="todo.id">
+      <span :class="{ completed: todo.completed }">{{ todo.title }}</span>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.completed {
+  text-decoration: line-through;
+}
+</style>

content/2.concepts/10.data-fetching/.template/solutions/server/api/todos/index.ts

@@ -0,0 +1,8 @@
+export default defineEventHandler(() => {
+  return [
+    { id: 1, title: 'Todo 1', completed: false },
+    { id: 2, title: 'Todo 2', completed: false },
+    { id: 3, title: 'Todo 3', completed: true },
+    { id: 4, title: 'Todo 4', completed: false },
+  ]
+})