Skip to content

Commit

Permalink
Merge branch 'main' into chore/nuxthub
Browse files Browse the repository at this point in the history
  • Loading branch information
k-miyake committed Sep 13, 2024
2 parents fe9e083 + e5d98f5 commit f03b923
Show file tree
Hide file tree
Showing 56 changed files with 4,078 additions and 3,506 deletions.
33 changes: 0 additions & 33 deletions .github/workflows/autofix.yml

This file was deleted.

3 changes: 2 additions & 1 deletion .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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 --frozen-lockfile
Expand Down
18 changes: 9 additions & 9 deletions components/FileIcon.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
3 changes: 2 additions & 1 deletion components/PanelDocs.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script setup lang="ts">
import type { NavItem, ParsedContent } from '@nuxt/content'
const runtime = useRuntimeConfig()
const {
navigation,
page,
Expand Down Expand Up @@ -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,
)
Expand Down
2 changes: 1 addition & 1 deletion components/PanelEditorFileSystemTree.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
7 changes: 3 additions & 4 deletions components/TheNav.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ 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)
Expand Down Expand Up @@ -53,7 +52,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>
Expand Down Expand Up @@ -94,7 +93,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>
Expand All @@ -116,7 +115,7 @@ addCommands(
rounded p2
title="GitHub"
hover="bg-active"
:href="repo"
:href="runtime.public.repoUrl"
target="_blank"
>
<div i-carbon-logo-github text-2xl />
Expand Down
4 changes: 2 additions & 2 deletions content/0.index.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ ogImage:

## Nuxt とは?

Nuxt は、[Vue.js](https://vuejs.org) を使用して、型安全でパフォーマンスが高く本番環境に適したフルスタックの Web アプリケーションやウェブサイトを作成するための直感的で拡張可能な方法を提供する、無料で[オープンソースのフレームワーク](https://github.com/nuxt/nuxt)です。Nuxt はベンダーロックインがなく、アプリケーションを[**どこでも、エッジ上でも**](https://nuxt.com/blog/nuxt-on-the-edge)デプロイすることができます。
Nuxt は、[Vue.js](https://vuejs.org) を使用して、型安全でパフォーマンスが高く本番環境に適したフルスタックの Web アプリケーションやウェブサイトを作成するための直感的で拡張可能な方法を提供する、無料で [オープンソースのフレームワーク](https://github.com/nuxt/nuxt) です。Nuxt はベンダーロックインがなく、アプリケーションを [**どこでも、エッジ上でも**](https://nuxt.com/blog/nuxt-on-the-edge) デプロイすることができます。

## はじめに

このチュートリアルでは、HTML、CSS、JavaScript の基本的な概念に既に精通していることを前提としています。Nuxt は[Vue](https://vuejs.org) の上に構築されたフルスタックフレームワークのため、Vue の基本的なチュートリアルも提供しています。
このチュートリアルでは、HTML、CSS、JavaScript の基本的な概念に既に精通していることを前提としています。Nuxt は [Vue](https://vuejs.org) の上に構築されたフルスタックフレームワークのため、Vue の基本的なチュートリアルも提供しています。

以下のトピックをクリックして学習を始めてください:

Expand Down
11 changes: 5 additions & 6 deletions content/1.vue/1.index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,15 @@ ogImage: true

# Vueの基本

Nuxt は、[Vue 3](https://vuejs.org/)というユーザーインターフェイスを構築するためのプログレッシブなフレームワークを使用しています。このセクションでは、Vue の基本について説明します。
Nuxt は、[Vue.js](https://ja.vuejs.org/) というユーザーインターフェイスを構築するためのプログレッシブなフレームワークを使用しています。このセクションでは、Vue の基本について説明します。\
エディタに表示されているのは、[Vueシングルファイルコンポーネント](https://ja.vuejs.org/guide/scaling-up/sfc)(SFC)です。

エディタに表示されているのは、[Vueシングルファイルコンポーネント](https://vuejs.org/guide/scaling-up/sfc.html)(SFC)です
SFC は、HTML、CSS、および JavaScript を 1 つの `.vue` ファイル内にまとめた再利用可能な自己完結型のコードブロックです。これは、JavaScript ロジックを定義するための [`<script setup>`](https://ja.vuejs.org/api/sfc-script-setup) ブロック、HTML テンプレートを定義するための `<template>` ブロック、および CSS スタイルを定義するためのオプションの `<style>` ブロックで構成されています。右側のプレイグラウンドで実際に操作してみるか、[公式のVueドキュメント](https://ja.vuejs.org/guide/scaling-up/sfc) で詳細を読むことができます

SFC は、HTML、CSS、および JavaScript を 1 つの `.vue` ファイル内にまとめた再利用可能な自己完結型のコードブロックです。これは、JavaScript ロジックを定義するための[`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)ブロック、HTML テンプレートを定義するための `<template>` ブロック、および CSS スタイルを定義するためのオプションの `<style>` ブロックで構成されています。右側のプレイグラウンドで実際に操作してみるか、[公式のVueドキュメント](https://v3.vuejs.org/guide/single-file-component.html)で詳細を読むことができます。

Nuxt では、Vue SFC をそのままサポートしており、アプリケーションを構築するために使用することを強くお勧めします。Nuxt が Vue のデフォルトの Vue SFC と異なる点の 1 つは、[Vueユーティリティを自動インポート](https://nuxt.com/docs/guide/concepts/auto-imports)することです。そのため、`ref``computed` などの Vue API を直接インポートせずに使用することができます。
Nuxt では Vue SFC をそのままサポートしており、アプリケーションを構築するために使用することを強くお勧めします。Nuxt が Vue のデフォルトの Vue SFC と異なる点の 1 つは、[Vueユーティリティを自動インポート](https://nuxt.com/docs/guide/concepts/auto-imports) することです。そのため、`ref``computed` などの Vue API を直接インポートせずに使用することができます。

::note
**ヒント**: Vue コンポーネントを定義する方法はいくつかありますが、一般的には[Composition API](https://vuejs.org/guide/introduction.html#composition-api)を使用した[`<script setup>`](https://vuejs.org/api/sfc-script-setup.html)を使用することをお勧めします。これにより、より良い開発者体験を得ることができます。Vue を初めて使用する場合、異なる選択肢をすべて理解することにこだわる必要はありません。私たちの推奨する方法を採用すれば、最も直感的に Vue を始められるでしょう。
**ヒント**: Vue コンポーネントを定義する方法はいくつかありますが、一般的には [Composition API](https://ja.vuejs.org/guide/introduction) を使用した [`<script setup>`](https://ja.vuejs.org/api/sfc-script-setup) を使用することをお勧めします。これにより、より良い開発者体験を得ることができます。Vue を初めて使用する場合、異なる選択肢をすべて理解することにこだわる必要はありません。私たちの推奨する方法を採用すれば、最も直感的に Vue を始められるでしょう。
::

今後、以下のトピックについて説明します:
Expand Down
2 changes: 1 addition & 1 deletion content/1.vue/2.reactivity/.template/files/app.vue
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<script setup>
<script setup lang="ts">
const count = ref(1)
const doubled = computed(() => count.value * 2)
Expand Down
3 changes: 2 additions & 1 deletion content/1.vue/2.reactivity/.template/solutions/app.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<script setup>
<script setup lang="ts">
const count = ref(1)
const multiplier = ref(2)
const result = computed(() => count.value * multiplier.value)
function increment() {
count.value++
}
function multiply() {
multiplier.value++
}
Expand Down
10 changes: 5 additions & 5 deletions content/1.vue/2.reactivity/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
ogImage: true
---

# Reactivity Part 1
# リアクティビティー パート1

Vue はデータの変更を監視して、変更された時に更新を自動的にトリガーする[優れたリアクティビティシステム](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)を提供していて、常に最新のデータを UI に反映させることができます。Vue のリアクティビティは、`ref``reactive``computed``watch` があります。
Vue はデータの変更を監視して、変更された時に更新を自動的にトリガーする [優れたリアクティビティシステム](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals) を提供していて、常に最新のデータを UI に反映させることができます。Vue のリアクティビティは、`ref``computed``watch` があります。

- [`ref()`](https://vuejs.org/api/reactivity-core.html#ref)は単一の値を保持するためのコンテナを作成し、値が変更された時に自動的に追跡できるようにします。値は `.value` を通してアクセスすることができます。
- [`ref()`](https://ja.vuejs.org/api/reactivity-core#ref) は単一の値を保持するためのコンテナを作成し、値が変更された時に自動的に追跡できるようにします。値は `.value` を通してアクセスすることができます。

- [`computed()`](https://vuejs.org/api/reactivity-core.html#computed)は getter 関数を受け取り、getter からの返り値を反映した `ref` オブジェクトを返します。
- [`computed()`](https://ja.vuejs.org/api/reactivity-core#computed) は getter 関数を受け取り、getter からの返り値を反映した `ref` オブジェクトを返します。

ここのプレイグラウンドでは、数字を保持するための `count` という名前の ref オブジェクトと、`count` の倍の値を計算する `double` という名前の computed オブジェクトを作成します。Vue は `double``count` に依存していることを知っているため、`count` が変更された際に `double` は自動で再計算されます。

Expand All @@ -18,7 +18,7 @@ Vue はデータの変更を監視して、変更された時に更新を自動
**注意**: `<template>` 内で参照された場合、refs は Vue によって自動的にアンラップされます。`.value` は、`<script>` 内や Vue コンポーネント外の JavaScript でアクセスする時にのみ必要になります。
::

## Challenge
## チャレンジ

では、実際にやってみましょう!
現在 `2` 倍にハードコードされている乗数をリアクティブに更新可能にするコードに変更してみましょう。
Expand Down
34 changes: 19 additions & 15 deletions content/1.vue/3.reactivity-2/.template/files/app.vue
Original file line number Diff line number Diff line change
@@ -1,38 +1,42 @@
<script setup lang="ts">
let todoId = 1
const id = ref(1)
const todoData = reactive({
loading: false,
data: null,
})
const loading = ref(false)
const data = ref<{
userId: number
id: number
title: string
completed: boolean
} | null>(null)
function increment() {
todoId++
id.value++
}
async function fetchTodo() {
todoData.loading = true
loading.value = true
try {
const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`)
todoData.data = await res.json()
const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${id.value}`)
data.value = await res.json()
}
finally {
todoData.loading = false
loading.value = false
}
}
watch(todoId, fetchTodo, { immediate: true })
watch(id, fetchTodo, { immediate: true })
</script>

<template>
<div>
<p>ID: {{ todoId }}</p>
<button type="button" :disabled="todoData.loading" @click="increment">
<p>ID: {{ id }}</p>
<button type="button" :disabled="loading" @click="increment">
次の TODO アイテムを取得
</button>
<p v-if="todoData.loading">
<p v-if="loading">
Loading...
</p>
<pre v-else>{{ todoData.data }}</pre>
<pre v-else>{{ data }}</pre>
</div>
</template>
30 changes: 16 additions & 14 deletions content/1.vue/3.reactivity-2/.template/solutions/app.vue
Original file line number Diff line number Diff line change
@@ -1,39 +1,41 @@
<script setup lang="ts">
const todoData = reactive({
const state = ref<{
id: number
loading: boolean
data: { userId: number, id: number, title: string, completed: boolean } | null
}>({
id: 1,
loading: false,
data: null,
})
function increment() {
todoData.id++
state.value.id++
}
async function fetchTodo() {
todoData.loading = true
state.value.loading = true
try {
const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoData.id}`)
todoData.data = await res.json()
const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${state.value.id}`)
state.value.data = await res.json()
}
finally {
todoData.loading = false
state.value.loading = false
}
}
watch(() => todoData.id, fetchTodo, { immediate: true })
fetchTodo()
watch(() => state.value.id, fetchTodo, { immediate: true })
</script>

<template>
<div>
<p>ID: {{ todoData.id }}</p>
<button type="button" :disabled="todoData.loading" @click="increment">
Next Todo
<p>ID: {{ state.id }}</p>
<button type="button" :disabled="state.loading" @click="increment">
次の TODO アイテムを取得
</button>
<p v-if="todoData.loading">
<p v-if="state.loading">
Loading...
</p>
<pre v-else>{{ todoData.data }}</pre>
<pre v-else>{{ state.data }}</pre>
</div>
</template>
Loading

0 comments on commit f03b923

Please sign in to comment.