Merge branch 'main' into main

.github/workflows/autofix.yml

@@ -17,12 +17,13 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
 
       - name: Use Node.js lts/*
         uses: actions/setup-node@v4
         with:
           node-version: lts/*
+          cache: pnpm
 
       - name: Install
         run: pnpm install

.github/workflows/ci.yml

@@ -14,10 +14,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version: lts/*
+          cache: pnpm
 
       - name: Install
         run: pnpm install

components/FileIcon.vue

@@ -8,40 +8,40 @@ const props = defineProps<{
 const FILE_ICONS = [
   {
     match: /\.vue$/,
-    icon: 'i-logos-vue',
+    icon: 'i-catppuccin-vue',
   },
   {
     match: /nuxt\.config\.\w+$/,
-    icon: 'i-logos-nuxt-icon scale-110',
+    icon: 'i-catppuccin-nuxt',
   },
   {
     match: /package\.json$/,
-    icon: 'i-file-icons-npm text-red scale-110',
+    icon: 'i-catppuccin-npm',
   },
   {
     match: /\.[mc]?tsx?$/,
-    icon: 'i-file-icons-typescript-alt text-blue3',
+    icon: 'i-catppuccin-typescript',
   },
   {
     match: /\.[mc]?jsx?$/,
-    icon: 'i-devicon-javascript',
+    icon: 'i-catppuccin-javascript',
   },
 ]
 
 const icon = computed(() => {
   if (props.isDirectory) {
     return props.isDirectoryOpen
-      ? 'i-ph:folder-open-duotone scale-120'
-      : 'i-ph:folder-simple-duotone scale-120'
+      ? 'i-catppuccin-folder-open'
+      : 'i-catppuccin-folder'
   }
   for (const { match, icon } of FILE_ICONS) {
     if (match.test(props.path))
       return icon
   }
-  return 'i-ph:file-duotone scale-120'
+  return 'i-catppuccin-file'
 })
 </script>
 
 <template>
-  <div :class="icon" />
+  <div :class="icon" light="brightness-60 hue-rotate-180 invert-100 saturate-200" scale-110 />
 </template>

components/PanelDocs.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { NavItem, ParsedContent } from '@nuxt/content'
 
+const runtime = useRuntimeConfig()
 const {
   navigation,
   page,
@@ -58,7 +59,7 @@ const ui = useUiState()
 
 const sourceUrl = computed(() =>
   page.value?._file
-    ? `https://github.com/nuxt/learn.nuxt.com/edit/main/content/${page.value._file}`
+    ? `${runtime.public.repoUrl}/edit/main/content/${page.value._file}`
     : undefined,
 )
 

components/PanelEditorFileSystemTree.vue

@@ -57,7 +57,7 @@ const folderCaret = computed(() => {
       :style="{
         paddingLeft: `${0.2 + 0.8 * (props.depth)}rem`,
       }"
-      :class="isFileSelected ? 'bg-active' : 'saturate-0 text-faded'"
+      :class="isFileSelected ? 'bg-active' : 'text-faded'"
       w-full flex items-center gap-1 px2 py1 text-left text-sm
       @click="handleClick"
     >

components/TheNav.vue

@@ -5,6 +5,7 @@ const guide = useGuideStore()
 const runtime = useRuntimeConfig()
 const commands = useCommandsStore()
 const repo = 'https://github.com/nuxt/learn.nuxt.com'
+
 const buildTime = new Date(runtime.public.buildTime)
 const timeAgo = useTimeAgo(buildTime)
 const route = useRoute()
@@ -53,7 +54,7 @@ addCommands(
       <NuxtTutorialLogo h-2em />
     </NuxtLink>
     <NuxtLink
-      :href="repo"
+      :href="runtime.public.repoUrl"
       target="_blank"
     >
       <div block translate-y--2 rounded bg-orange:10 px2 py1 text-xs text-orange>
@@ -95,7 +96,7 @@ addCommands(
         <template #popper>
           <div px5 py4 grid="~ gap-y-3 gap-x-2 cols-[max-content_1fr] items-center">
             <div i-ph-package-duotone text-xl />
-            <NuxtLink :to="`${repo}/commit/${runtime.public.gitSha}`" target="_blank" title="View on GitHub">
+            <NuxtLink :to="`${runtime.public.repoUrl}/commit/${runtime.public.gitSha}`" target="_blank" title="View on GitHub">
               <time :datetime="buildTime.toISOString()" :title="buildTime.toLocaleString()">
                 Built {{ timeAgo }} (<code>{{ runtime.public.gitSha.slice(0, 5) }}</code>)
               </time>
@@ -126,7 +127,7 @@ addCommands(
         rounded p2
         title="GitHub"
         hover="bg-active"
-        :href="repo"
+        :href="runtime.public.repoUrl"
         target="_blank"
       >
         <div i-carbon-logo-github text-2xl />

content/1.vue/1.index.md

@@ -6,7 +6,7 @@ ogImage: true
 
 Nuxt integrates [Vue 3](https://vuejs.org/), a progressive framework for building user interfaces. In this section, we will cover the basics of Vue.
 
-What you see in the editor is a [Vue Single-File Component](https://vuejs.org/guide/scaling-up/sfc.html)(SFC).
+What you see in the editor is a [Vue Single-File Component](https://vuejs.org/guide/scaling-up/sfc.html) (SFC).
 
 An SFC is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written inside a `.vue` file. It's composed with a [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html) block to define the JavaScript logic, a `<template>` block to define the HTML template and optional `<style>` blocks to define the CSS style. You can play with it using the playground on the right, or read more about it in the [official Vue documentation](https://v3.vuejs.org/guide/single-file-component.html).
 

monaco/env.ts

@@ -56,7 +56,7 @@ export class WorkerHost {
         }
       }
     }
-    catch (err) {
+    catch {
       return undefined
     }
   }

monaco/vue.worker.ts

@@ -4,7 +4,7 @@ import type * as monaco from 'monaco-editor-core'
 import * as ts from 'typescript/lib/tsserverlibrary'
 import type { LanguageServiceEnvironment, VueCompilerOptions } from '@vue/language-service'
 import { createVueLanguagePlugin, getFullLanguageServicePlugins, resolveVueCompilerOptions } from '@vue/language-service'
-import { createTypeScriptWorkerService } from '@volar/monaco/worker'
+import { createTypeScriptWorkerLanguageService } from '@volar/monaco/worker'
 import { URI } from 'vscode-uri'
 import type { WorkerHost } from './env'
 
@@ -68,7 +68,7 @@ self.onmessage = () => {
       },
     }
 
-    return createTypeScriptWorkerService({
+    return createTypeScriptWorkerLanguageService({
       typescript: ts,
       env,
       compilerOptions,

nuxt.config.ts

@@ -11,7 +11,7 @@ export default defineNuxtConfig({
     '@pinia/nuxt',
     'floating-vue/nuxt',
     '@nuxtjs/seo',
-    '@nuxt/icon',
+    // '@nuxt/icon',
     '@nuxt/eslint',
 
     // local
@@ -67,6 +67,7 @@ export default defineNuxtConfig({
     public: {
       buildTime: Date.now(),
       gitSha: execaSync('git', ['rev-parse', 'HEAD']).stdout.trim(),
+      repoUrl: 'https://github.com/nuxt/learn.nuxt.com',
     },
     app: {
       devtools: {
@@ -130,4 +131,6 @@ export default defineNuxtConfig({
       search: {},
     },
   },
+
+  compatibilityDate: '2024-04-03',
 })

package.json

@@ -2,7 +2,7 @@
   "name": "learn.nuxt.com",
   "type": "module",
   "private": true,
-  "packageManager": "pnpm@9.4.0",
+  "packageManager": "pnpm@9.7.1",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -14,54 +14,56 @@
     "format": "eslint . --fix"
   },
   "dependencies": {
-    "@shikijs/core": "^1.10.0",
-    "@shikijs/monaco": "^1.10.0",
-    "@volar/monaco": "~2.4.0-alpha.12",
-    "@vue/language-service": "^2.0.26-alpha.2",
+    "@shikijs/core": "^1.14.1",
+    "@shikijs/monaco": "^1.14.1",
+    "@volar/monaco": "~2.4.0",
+    "@vue/language-service": "^2.0.29",
     "@webcontainer/api": "^1.2.0",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/xterm": "^5.5.0",
     "birpc": "^0.2.17",
     "floating-vue": "^5.2.2",
     "jszip": "^3.10.1",
     "monaco-editor": "^0.50.0",
-    "shiki": "^1.10.0",
+    "shiki": "^1.14.1",
     "splitpanes": "^3.1.5",
     "strip-json-comments": "^5.0.1",
-    "theme-vitesse": "^0.8.0",
+    "theme-vitesse": "^0.8.3",
     "unified": "^11.0.5",
     "vscode-uri": "^3.0.8",
-    "vue": "^3.4.31",
-    "vue-router": "^4.4.0"
+    "vue": "^3.4.38",
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.21.2",
-    "@iconify-json/logos": "^1.1.43",
-    "@iconify/json": "^2.2.224",
-    "@nuxt/content": "^2.13.0",
-    "@nuxt/devtools": "^1.3.8",
-    "@nuxt/eslint": "^0.3.13",
-    "@nuxt/icon": "^1.0.0",
+    "@antfu/eslint-config": "^2.26.0",
+    "@iconify-json/catppuccin": "^1.1.4",
+    "@iconify-json/logos": "^1.1.44",
+    "@iconify-json/ph": "^1.1.14",
+    "@iconify-json/svg-spinners": "^1.1.3",
+    "@nuxt/content": "^2.13.2",
+    "@nuxt/devtools": "^1.3.14",
+    "@nuxt/eslint": "^0.5.1",
+    "@nuxt/icon": "^1.4.7",
     "@nuxt/image": "^1.7.0",
-    "@nuxt/kit": "^3.12.2",
-    "@nuxtjs/color-mode": "^3.4.2",
+    "@nuxt/kit": "^3.12.4",
+    "@nuxtjs/color-mode": "^3.4.4",
     "@nuxtjs/seo": "2.0.0-rc.10",
-    "@pinia/nuxt": "^0.5.1",
-    "@unocss/eslint-plugin": "^0.61.0",
-    "@unocss/extractor-mdc": "^0.61.0",
-    "@unocss/nuxt": "^0.61.0",
-    "@vueuse/nuxt": "^10.11.0",
-    "eslint": "^9.6.0",
+    "@pinia/nuxt": "^0.5.3",
+    "@unocss/eslint-plugin": "^0.62.2",
+    "@unocss/extractor-mdc": "^0.62.2",
+    "@unocss/nuxt": "^0.62.2",
+    "@vueuse/nuxt": "^11.0.1",
+    "eslint": "^9.9.0",
     "eslint-plugin-format": "^0.1.2",
-    "execa": "^9.3.0",
+    "execa": "^9.3.1",
     "fast-glob": "^3.3.2",
     "fuse.js": "^7.0.0",
     "monaco-editor-core": "^0.50.0",
-    "nuxt": "^3.12.2",
+    "nuxt": "^3.12.4",
     "pathe": "^1.1.2",
     "remark-external-links": "^9.0.1",
-    "typescript": "^5.5.3",
-    "vue-tsc": "^2.0.26-alpha.2"
+    "typescript": "^5.5.4",
+    "vue-tsc": "^2.0.29"
   },
   "pnpm": {
     "patchedDependencies": {