diff --git a/.vscode/settings.json b/.vscode/settings.json index 0a477dc4..e025abb4 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -34,5 +34,13 @@ "json", "jsonc", "yaml" - ] + ], + "i18n-ally.enabledFrameworks": [ + "vue" + ], + "i18n-ally.localesPaths": [ + "i18n/locales" + ], + "i18n-ally.keystyle": "nested", + "i18n-ally.sourceLanguage": "en" } diff --git a/components/ColorSchemeToggle.vue b/components/ColorSchemeToggle.vue index 13e0e679..cf12a88d 100644 --- a/components/ColorSchemeToggle.vue +++ b/components/ColorSchemeToggle.vue @@ -8,9 +8,9 @@ function toggleMode() { addCommands( { id: 'toggle-color-mode', - title: colorMode.value === 'light' - ? 'Switch to dark mode' - : 'Switch to light mode', + title: () => colorMode.value === 'light' + ? $t('color-mode.to-dark') + : $t('color-mode.to-light'), handler: toggleMode, icon: colorMode.value === 'light' ? 'i-ph-moon-stars-duotone' diff --git a/components/CommandPalette.vue b/components/CommandPalette.vue index a933b558..f5d5af7c 100644 --- a/components/CommandPalette.vue +++ b/components/CommandPalette.vue @@ -32,6 +32,12 @@ function scrollIntoView(elOrComponent?: any) { }) } +function getTitle(command: Command) { + if (typeof command.title === 'function') + return command.title() + return command.title +} + // Reset selected when search changes watch( () => commands.search, @@ -102,15 +108,15 @@ useEventListener('keydown', (e) => { ref="input" v-model="commands.search" h-full w-full rounded border-none p4 pl0 outline-none bg-base - placeholder="Search..." + :placeholder="$t('search-dots')" >
{ @click="runCommand(c)" >
- {{ c.title }} + {{ getTitle(c) }}
diff --git a/components/PanelDocs.vue b/components/PanelDocs.vue index 0b48c666..56753d2a 100644 --- a/components/PanelDocs.vue +++ b/components/PanelDocs.vue @@ -3,14 +3,20 @@ import type { ContentNavigationItem } from '@nuxt/content' const runtime = useRuntimeConfig() const route = useRoute() -const { data: page } = useAsyncData(route.path, () => { - return queryCollection('tutorials').path(route.path).first() +const { locale } = useI18n() + +const collection = computed(() => locale.value === 'ja' ? 'ja' : 'en') + +const { data: page } = useAsyncData(`${locale.value}-${route.path}`, () => { + return queryCollection(collection.value) + .path(route.path) + .first() }) -const { data: navigation } = useAsyncData(`navigation`, () => { - return queryCollectionNavigation('tutorials') +const { data: navigation } = useAsyncData(`${locale.value}-navigation`, () => { + return queryCollectionNavigation(collection.value) }) -const { data: surroundings } = useAsyncData(`${route.path}-surroundings`, () => { - return queryCollectionItemSurroundings('tutorials', route.path, { +const { data: surroundings } = useAsyncData(`${locale.value}-${route.path}-surroundings`, () => { + return queryCollectionItemSurroundings(collection.value, route.path, { fields: ['title', 'description'], }) }) @@ -55,7 +61,7 @@ const breadcrumbs = computed(() => { if (!breadcrumbs.find(i => i.path === '/')) { breadcrumbs.unshift({ - title: 'Guide', + title: $t('guide'), path: '/', }) } @@ -134,7 +140,7 @@ router.beforeEach(() => { hover="text-primary op100" >
- Edit this page + {{ $t('edit-this-page') }}
diff --git a/components/PanelPreviewLoading.vue b/components/PanelPreviewLoading.vue index 677d8503..42abe62c 100644 --- a/components/PanelPreviewLoading.vue +++ b/components/PanelPreviewLoading.vue @@ -51,7 +51,7 @@ function getTextClass(status: PlaygroundStatus) {
- Initializing WebContainer + {{ $t('steps.initializing-webcontainer') }}
- Mounting files + {{ $t('steps.mounting-files') }}
- Installing dependencies + {{ $t('steps.installing-dependencies') }}
- Starting Nuxt server + {{ $t('steps.starting-nuxt-server') }}
- Waiting for Nuxt to ready + {{ $t('steps.waiting-for-nuxt-to-ready') }}
diff --git a/components/PanelTerminal.vue b/components/PanelTerminal.vue index c43bd297..0904bacb 100644 --- a/components/PanelTerminal.vue +++ b/components/PanelTerminal.vue @@ -11,19 +11,19 @@ const play = usePlaygroundStore() bg-faded p2 pl4 >
- Terminal + {{ $t('terminal.name') }}
+ + diff --git a/components/content/ContentCard.vue b/components/content/ContentCard.vue index 65188f2e..d3766592 100644 --- a/components/content/ContentCard.vue +++ b/components/content/ContentCard.vue @@ -19,7 +19,7 @@ defineProps<{
{{ title }} - Coming Soon + {{ $t('coming-soon') }}
diff --git a/content.config.ts b/content.config.ts index 6e444ac5..823cb947 100644 --- a/content.config.ts +++ b/content.config.ts @@ -2,10 +2,17 @@ import { defineCollection, defineContentConfig } from '@nuxt/content' export default defineContentConfig({ collections: { - tutorials: defineCollection({ + en: defineCollection({ type: 'page', source: { - include: '**', + include: 'en/**', + exclude: ['**/.template/**'], + }, + }), + ja: defineCollection({ + type: 'page', + source: { + include: 'ja/**', exclude: ['**/.template/**'], }, }), diff --git a/content/FOR_TRANSLATORS.md b/content/FOR_TRANSLATORS.md new file mode 100644 index 00000000..5890b963 --- /dev/null +++ b/content/FOR_TRANSLATORS.md @@ -0,0 +1,12 @@ +Hey! Thanks for being interested in helping translate the Nuxt Tutorial. + +However, please note that currently we are focusing only on the English version and Japanese version. + +We are NOT accepting translations for other languages at this moment due to the limited resources. + +Feel free to fork the repository and deploy your own version of the website. +But please do not send translation PRs for now. + +After we finishing writing the content, we might start considering supporting other languages. + +Thank you for your understanding. diff --git a/content/.template/files/app.vue b/content/en/.template/files/app.vue similarity index 100% rename from content/.template/files/app.vue rename to content/en/.template/files/app.vue diff --git a/content/.template/index.ts b/content/en/.template/index.ts similarity index 100% rename from content/.template/index.ts rename to content/en/.template/index.ts diff --git a/content/.template/solutions/app.vue b/content/en/.template/solutions/app.vue similarity index 100% rename from content/.template/solutions/app.vue rename to content/en/.template/solutions/app.vue diff --git a/content/0.index.md b/content/en/0.index.md similarity index 100% rename from content/0.index.md rename to content/en/0.index.md diff --git a/content/1.vue/.template/files/app.vue b/content/en/1.vue/.template/files/app.vue similarity index 100% rename from content/1.vue/.template/files/app.vue rename to content/en/1.vue/.template/files/app.vue diff --git a/content/1.vue/.template/index.ts b/content/en/1.vue/.template/index.ts similarity index 100% rename from content/1.vue/.template/index.ts rename to content/en/1.vue/.template/index.ts diff --git a/content/1.vue/1.index.md b/content/en/1.vue/1.index.md similarity index 100% rename from content/1.vue/1.index.md rename to content/en/1.vue/1.index.md diff --git a/content/1.vue/2.reactivity/.template/files/app.vue b/content/en/1.vue/2.reactivity/.template/files/app.vue similarity index 100% rename from content/1.vue/2.reactivity/.template/files/app.vue rename to content/en/1.vue/2.reactivity/.template/files/app.vue diff --git a/content/1.vue/2.reactivity/.template/index.ts b/content/en/1.vue/2.reactivity/.template/index.ts similarity index 100% rename from content/1.vue/2.reactivity/.template/index.ts rename to content/en/1.vue/2.reactivity/.template/index.ts diff --git a/content/1.vue/2.reactivity/.template/solutions/app.vue b/content/en/1.vue/2.reactivity/.template/solutions/app.vue similarity index 100% rename from content/1.vue/2.reactivity/.template/solutions/app.vue rename to content/en/1.vue/2.reactivity/.template/solutions/app.vue diff --git a/content/1.vue/2.reactivity/index.md b/content/en/1.vue/2.reactivity/index.md similarity index 100% rename from content/1.vue/2.reactivity/index.md rename to content/en/1.vue/2.reactivity/index.md diff --git a/content/1.vue/3.reactivity-2/.template/files/app.vue b/content/en/1.vue/3.reactivity-2/.template/files/app.vue similarity index 100% rename from content/1.vue/3.reactivity-2/.template/files/app.vue rename to content/en/1.vue/3.reactivity-2/.template/files/app.vue diff --git a/content/1.vue/3.reactivity-2/.template/index.ts b/content/en/1.vue/3.reactivity-2/.template/index.ts similarity index 100% rename from content/1.vue/3.reactivity-2/.template/index.ts rename to content/en/1.vue/3.reactivity-2/.template/index.ts diff --git a/content/1.vue/3.reactivity-2/.template/solutions/app.vue b/content/en/1.vue/3.reactivity-2/.template/solutions/app.vue similarity index 100% rename from content/1.vue/3.reactivity-2/.template/solutions/app.vue rename to content/en/1.vue/3.reactivity-2/.template/solutions/app.vue diff --git a/content/1.vue/3.reactivity-2/index.md b/content/en/1.vue/3.reactivity-2/index.md similarity index 100% rename from content/1.vue/3.reactivity-2/index.md rename to content/en/1.vue/3.reactivity-2/index.md diff --git a/content/1.vue/4.composition-api/.template/index.ts b/content/en/1.vue/4.composition-api/.template/index.ts similarity index 100% rename from content/1.vue/4.composition-api/.template/index.ts rename to content/en/1.vue/4.composition-api/.template/index.ts diff --git a/content/1.vue/4.composition-api/index.md b/content/en/1.vue/4.composition-api/index.md similarity index 100% rename from content/1.vue/4.composition-api/index.md rename to content/en/1.vue/4.composition-api/index.md diff --git a/content/1.vue/5.components/.template/index.ts b/content/en/1.vue/5.components/.template/index.ts similarity index 100% rename from content/1.vue/5.components/.template/index.ts rename to content/en/1.vue/5.components/.template/index.ts diff --git a/content/1.vue/5.components/index.md b/content/en/1.vue/5.components/index.md similarity index 100% rename from content/1.vue/5.components/index.md rename to content/en/1.vue/5.components/index.md diff --git a/content/1.vue/5.summary/.template/index.ts b/content/en/1.vue/5.summary/.template/index.ts similarity index 100% rename from content/1.vue/5.summary/.template/index.ts rename to content/en/1.vue/5.summary/.template/index.ts diff --git a/content/1.vue/5.summary/index.md b/content/en/1.vue/5.summary/index.md similarity index 100% rename from content/1.vue/5.summary/index.md rename to content/en/1.vue/5.summary/index.md diff --git a/content/2.concepts/1.index.md b/content/en/2.concepts/1.index.md similarity index 100% rename from content/2.concepts/1.index.md rename to content/en/2.concepts/1.index.md diff --git a/content/2.concepts/10.data-fetching/.template/files/app.vue b/content/en/2.concepts/10.data-fetching/.template/files/app.vue similarity index 100% rename from content/2.concepts/10.data-fetching/.template/files/app.vue rename to content/en/2.concepts/10.data-fetching/.template/files/app.vue diff --git a/content/2.concepts/10.data-fetching/.template/files/server/api/todos/index.ts b/content/en/2.concepts/10.data-fetching/.template/files/server/api/todos/index.ts similarity index 100% rename from content/2.concepts/10.data-fetching/.template/files/server/api/todos/index.ts rename to content/en/2.concepts/10.data-fetching/.template/files/server/api/todos/index.ts diff --git a/content/2.concepts/10.data-fetching/.template/index.ts b/content/en/2.concepts/10.data-fetching/.template/index.ts similarity index 100% rename from content/2.concepts/10.data-fetching/.template/index.ts rename to content/en/2.concepts/10.data-fetching/.template/index.ts diff --git a/content/2.concepts/10.data-fetching/.template/solutions/app.vue b/content/en/2.concepts/10.data-fetching/.template/solutions/app.vue similarity index 100% rename from content/2.concepts/10.data-fetching/.template/solutions/app.vue rename to content/en/2.concepts/10.data-fetching/.template/solutions/app.vue diff --git a/content/2.concepts/10.data-fetching/.template/solutions/server/api/todos/index.ts b/content/en/2.concepts/10.data-fetching/.template/solutions/server/api/todos/index.ts similarity index 100% rename from content/2.concepts/10.data-fetching/.template/solutions/server/api/todos/index.ts rename to content/en/2.concepts/10.data-fetching/.template/solutions/server/api/todos/index.ts diff --git a/content/2.concepts/10.data-fetching/index.md b/content/en/2.concepts/10.data-fetching/index.md similarity index 100% rename from content/2.concepts/10.data-fetching/index.md rename to content/en/2.concepts/10.data-fetching/index.md diff --git a/content/2.concepts/2.app-vue/.template/files/app.vue b/content/en/2.concepts/2.app-vue/.template/files/app.vue similarity index 100% rename from content/2.concepts/2.app-vue/.template/files/app.vue rename to content/en/2.concepts/2.app-vue/.template/files/app.vue diff --git a/content/2.concepts/2.app-vue/.template/index.ts b/content/en/2.concepts/2.app-vue/.template/index.ts similarity index 100% rename from content/2.concepts/2.app-vue/.template/index.ts rename to content/en/2.concepts/2.app-vue/.template/index.ts diff --git a/content/2.concepts/2.app-vue/index.md b/content/en/2.concepts/2.app-vue/index.md similarity index 100% rename from content/2.concepts/2.app-vue/index.md rename to content/en/2.concepts/2.app-vue/index.md diff --git a/content/2.concepts/3.routing/.template/files/app.vue b/content/en/2.concepts/3.routing/.template/files/app.vue similarity index 100% rename from content/2.concepts/3.routing/.template/files/app.vue rename to content/en/2.concepts/3.routing/.template/files/app.vue diff --git a/content/2.concepts/3.routing/.template/files/pages/foo.vue b/content/en/2.concepts/3.routing/.template/files/pages/foo.vue similarity index 100% rename from content/2.concepts/3.routing/.template/files/pages/foo.vue rename to content/en/2.concepts/3.routing/.template/files/pages/foo.vue diff --git a/content/2.concepts/3.routing/.template/files/pages/index.vue b/content/en/2.concepts/3.routing/.template/files/pages/index.vue similarity index 100% rename from content/2.concepts/3.routing/.template/files/pages/index.vue rename to content/en/2.concepts/3.routing/.template/files/pages/index.vue diff --git a/content/2.concepts/3.routing/.template/files/pages/posts/[id].vue b/content/en/2.concepts/3.routing/.template/files/pages/posts/[id].vue similarity index 100% rename from content/2.concepts/3.routing/.template/files/pages/posts/[id].vue rename to content/en/2.concepts/3.routing/.template/files/pages/posts/[id].vue diff --git a/content/2.concepts/3.routing/.template/index.ts b/content/en/2.concepts/3.routing/.template/index.ts similarity index 100% rename from content/2.concepts/3.routing/.template/index.ts rename to content/en/2.concepts/3.routing/.template/index.ts diff --git a/content/2.concepts/3.routing/index.md b/content/en/2.concepts/3.routing/index.md similarity index 100% rename from content/2.concepts/3.routing/index.md rename to content/en/2.concepts/3.routing/index.md diff --git a/content/2.concepts/4.auto-imports/.template/files/app.vue b/content/en/2.concepts/4.auto-imports/.template/files/app.vue similarity index 100% rename from content/2.concepts/4.auto-imports/.template/files/app.vue rename to content/en/2.concepts/4.auto-imports/.template/files/app.vue diff --git a/content/2.concepts/4.auto-imports/.template/files/components/Counter.vue b/content/en/2.concepts/4.auto-imports/.template/files/components/Counter.vue similarity index 100% rename from content/2.concepts/4.auto-imports/.template/files/components/Counter.vue rename to content/en/2.concepts/4.auto-imports/.template/files/components/Counter.vue diff --git a/content/2.concepts/4.auto-imports/.template/files/composables/counter.ts b/content/en/2.concepts/4.auto-imports/.template/files/composables/counter.ts similarity index 100% rename from content/2.concepts/4.auto-imports/.template/files/composables/counter.ts rename to content/en/2.concepts/4.auto-imports/.template/files/composables/counter.ts diff --git a/content/2.concepts/4.auto-imports/.template/files/utils/double.ts b/content/en/2.concepts/4.auto-imports/.template/files/utils/double.ts similarity index 100% rename from content/2.concepts/4.auto-imports/.template/files/utils/double.ts rename to content/en/2.concepts/4.auto-imports/.template/files/utils/double.ts diff --git a/content/2.concepts/4.auto-imports/.template/index.ts b/content/en/2.concepts/4.auto-imports/.template/index.ts similarity index 100% rename from content/2.concepts/4.auto-imports/.template/index.ts rename to content/en/2.concepts/4.auto-imports/.template/index.ts diff --git a/content/2.concepts/4.auto-imports/.template/solutions/app.vue b/content/en/2.concepts/4.auto-imports/.template/solutions/app.vue similarity index 100% rename from content/2.concepts/4.auto-imports/.template/solutions/app.vue rename to content/en/2.concepts/4.auto-imports/.template/solutions/app.vue diff --git a/content/2.concepts/4.auto-imports/.template/solutions/components/Counter.vue b/content/en/2.concepts/4.auto-imports/.template/solutions/components/Counter.vue similarity index 100% rename from content/2.concepts/4.auto-imports/.template/solutions/components/Counter.vue rename to content/en/2.concepts/4.auto-imports/.template/solutions/components/Counter.vue diff --git a/content/2.concepts/4.auto-imports/.template/solutions/composables/counter.ts b/content/en/2.concepts/4.auto-imports/.template/solutions/composables/counter.ts similarity index 100% rename from content/2.concepts/4.auto-imports/.template/solutions/composables/counter.ts rename to content/en/2.concepts/4.auto-imports/.template/solutions/composables/counter.ts diff --git a/content/2.concepts/4.auto-imports/.template/solutions/utils/double.ts b/content/en/2.concepts/4.auto-imports/.template/solutions/utils/double.ts similarity index 100% rename from content/2.concepts/4.auto-imports/.template/solutions/utils/double.ts rename to content/en/2.concepts/4.auto-imports/.template/solutions/utils/double.ts diff --git a/content/2.concepts/4.auto-imports/index.md b/content/en/2.concepts/4.auto-imports/index.md similarity index 100% rename from content/2.concepts/4.auto-imports/index.md rename to content/en/2.concepts/4.auto-imports/index.md diff --git a/content/2.concepts/5.middleware/.template/files/app.vue b/content/en/2.concepts/5.middleware/.template/files/app.vue similarity index 100% rename from content/2.concepts/5.middleware/.template/files/app.vue rename to content/en/2.concepts/5.middleware/.template/files/app.vue diff --git a/content/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts b/content/en/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts similarity index 100% rename from content/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts rename to content/en/2.concepts/5.middleware/.template/files/middleware/hello-foo.ts diff --git a/content/2.concepts/5.middleware/.template/files/middleware/my-middleware.global.ts b/content/en/2.concepts/5.middleware/.template/files/middleware/my-middleware.global.ts similarity index 100% rename from content/2.concepts/5.middleware/.template/files/middleware/my-middleware.global.ts rename to content/en/2.concepts/5.middleware/.template/files/middleware/my-middleware.global.ts diff --git a/content/2.concepts/5.middleware/.template/files/pages/foo.vue b/content/en/2.concepts/5.middleware/.template/files/pages/foo.vue similarity index 100% rename from content/2.concepts/5.middleware/.template/files/pages/foo.vue rename to content/en/2.concepts/5.middleware/.template/files/pages/foo.vue diff --git a/content/2.concepts/5.middleware/.template/files/pages/index.vue b/content/en/2.concepts/5.middleware/.template/files/pages/index.vue similarity index 100% rename from content/2.concepts/5.middleware/.template/files/pages/index.vue rename to content/en/2.concepts/5.middleware/.template/files/pages/index.vue diff --git a/content/2.concepts/5.middleware/.template/index.ts b/content/en/2.concepts/5.middleware/.template/index.ts similarity index 100% rename from content/2.concepts/5.middleware/.template/index.ts rename to content/en/2.concepts/5.middleware/.template/index.ts diff --git a/content/2.concepts/5.middleware/.template/solutions/app.vue b/content/en/2.concepts/5.middleware/.template/solutions/app.vue similarity index 100% rename from content/2.concepts/5.middleware/.template/solutions/app.vue rename to content/en/2.concepts/5.middleware/.template/solutions/app.vue diff --git a/content/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts b/content/en/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts similarity index 100% rename from content/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts rename to content/en/2.concepts/5.middleware/.template/solutions/middleware/my-middleware.global.ts diff --git a/content/2.concepts/5.middleware/.template/solutions/pages/foo.vue b/content/en/2.concepts/5.middleware/.template/solutions/pages/foo.vue similarity index 100% rename from content/2.concepts/5.middleware/.template/solutions/pages/foo.vue rename to content/en/2.concepts/5.middleware/.template/solutions/pages/foo.vue diff --git a/content/2.concepts/5.middleware/.template/solutions/pages/index.vue b/content/en/2.concepts/5.middleware/.template/solutions/pages/index.vue similarity index 100% rename from content/2.concepts/5.middleware/.template/solutions/pages/index.vue rename to content/en/2.concepts/5.middleware/.template/solutions/pages/index.vue diff --git a/content/2.concepts/5.middleware/index.md b/content/en/2.concepts/5.middleware/index.md similarity index 100% rename from content/2.concepts/5.middleware/index.md rename to content/en/2.concepts/5.middleware/index.md diff --git a/content/2.concepts/6.layout/.template/files/app.vue b/content/en/2.concepts/6.layout/.template/files/app.vue similarity index 100% rename from content/2.concepts/6.layout/.template/files/app.vue rename to content/en/2.concepts/6.layout/.template/files/app.vue diff --git a/content/2.concepts/6.layout/.template/files/layouts/default.vue b/content/en/2.concepts/6.layout/.template/files/layouts/default.vue similarity index 100% rename from content/2.concepts/6.layout/.template/files/layouts/default.vue rename to content/en/2.concepts/6.layout/.template/files/layouts/default.vue diff --git a/content/2.concepts/6.layout/.template/files/layouts/no-header.vue b/content/en/2.concepts/6.layout/.template/files/layouts/no-header.vue similarity index 100% rename from content/2.concepts/6.layout/.template/files/layouts/no-header.vue rename to content/en/2.concepts/6.layout/.template/files/layouts/no-header.vue diff --git a/content/2.concepts/6.layout/.template/files/pages/foo.vue b/content/en/2.concepts/6.layout/.template/files/pages/foo.vue similarity index 100% rename from content/2.concepts/6.layout/.template/files/pages/foo.vue rename to content/en/2.concepts/6.layout/.template/files/pages/foo.vue diff --git a/content/2.concepts/6.layout/.template/files/pages/index.vue b/content/en/2.concepts/6.layout/.template/files/pages/index.vue similarity index 100% rename from content/2.concepts/6.layout/.template/files/pages/index.vue rename to content/en/2.concepts/6.layout/.template/files/pages/index.vue diff --git a/content/2.concepts/6.layout/.template/index.ts b/content/en/2.concepts/6.layout/.template/index.ts similarity index 100% rename from content/2.concepts/6.layout/.template/index.ts rename to content/en/2.concepts/6.layout/.template/index.ts diff --git a/content/2.concepts/6.layout/index.md b/content/en/2.concepts/6.layout/index.md similarity index 100% rename from content/2.concepts/6.layout/index.md rename to content/en/2.concepts/6.layout/index.md diff --git a/content/2.concepts/7.meta/index.md b/content/en/2.concepts/7.meta/index.md similarity index 100% rename from content/2.concepts/7.meta/index.md rename to content/en/2.concepts/7.meta/index.md diff --git a/content/2.concepts/8.rendering-modes/.template/files/app.vue b/content/en/2.concepts/8.rendering-modes/.template/files/app.vue similarity index 100% rename from content/2.concepts/8.rendering-modes/.template/files/app.vue rename to content/en/2.concepts/8.rendering-modes/.template/files/app.vue diff --git a/content/2.concepts/8.rendering-modes/.template/files/pages/foo.vue b/content/en/2.concepts/8.rendering-modes/.template/files/pages/foo.vue similarity index 100% rename from content/2.concepts/8.rendering-modes/.template/files/pages/foo.vue rename to content/en/2.concepts/8.rendering-modes/.template/files/pages/foo.vue diff --git a/content/2.concepts/8.rendering-modes/.template/files/pages/index.vue b/content/en/2.concepts/8.rendering-modes/.template/files/pages/index.vue similarity index 100% rename from content/2.concepts/8.rendering-modes/.template/files/pages/index.vue rename to content/en/2.concepts/8.rendering-modes/.template/files/pages/index.vue diff --git a/content/2.concepts/8.rendering-modes/.template/index.ts b/content/en/2.concepts/8.rendering-modes/.template/index.ts similarity index 100% rename from content/2.concepts/8.rendering-modes/.template/index.ts rename to content/en/2.concepts/8.rendering-modes/.template/index.ts diff --git a/content/2.concepts/8.rendering-modes/.template/solutions/app.vue b/content/en/2.concepts/8.rendering-modes/.template/solutions/app.vue similarity index 100% rename from content/2.concepts/8.rendering-modes/.template/solutions/app.vue rename to content/en/2.concepts/8.rendering-modes/.template/solutions/app.vue diff --git a/content/2.concepts/8.rendering-modes/.template/solutions/nuxt.config.ts b/content/en/2.concepts/8.rendering-modes/.template/solutions/nuxt.config.ts similarity index 100% rename from content/2.concepts/8.rendering-modes/.template/solutions/nuxt.config.ts rename to content/en/2.concepts/8.rendering-modes/.template/solutions/nuxt.config.ts diff --git a/content/2.concepts/8.rendering-modes/.template/solutions/pages/foo.vue b/content/en/2.concepts/8.rendering-modes/.template/solutions/pages/foo.vue similarity index 100% rename from content/2.concepts/8.rendering-modes/.template/solutions/pages/foo.vue rename to content/en/2.concepts/8.rendering-modes/.template/solutions/pages/foo.vue diff --git a/content/2.concepts/8.rendering-modes/.template/solutions/pages/index.vue b/content/en/2.concepts/8.rendering-modes/.template/solutions/pages/index.vue similarity index 100% rename from content/2.concepts/8.rendering-modes/.template/solutions/pages/index.vue rename to content/en/2.concepts/8.rendering-modes/.template/solutions/pages/index.vue diff --git a/content/2.concepts/8.rendering-modes/index.md b/content/en/2.concepts/8.rendering-modes/index.md similarity index 100% rename from content/2.concepts/8.rendering-modes/index.md rename to content/en/2.concepts/8.rendering-modes/index.md diff --git a/content/2.concepts/9.state-manegement/.template/files/app.vue b/content/en/2.concepts/9.state-manegement/.template/files/app.vue similarity index 100% rename from content/2.concepts/9.state-manegement/.template/files/app.vue rename to content/en/2.concepts/9.state-manegement/.template/files/app.vue diff --git a/content/2.concepts/9.state-manegement/.template/files/components/CounterA.vue b/content/en/2.concepts/9.state-manegement/.template/files/components/CounterA.vue similarity index 100% rename from content/2.concepts/9.state-manegement/.template/files/components/CounterA.vue rename to content/en/2.concepts/9.state-manegement/.template/files/components/CounterA.vue diff --git a/content/2.concepts/9.state-manegement/.template/files/components/CounterB.vue b/content/en/2.concepts/9.state-manegement/.template/files/components/CounterB.vue similarity index 100% rename from content/2.concepts/9.state-manegement/.template/files/components/CounterB.vue rename to content/en/2.concepts/9.state-manegement/.template/files/components/CounterB.vue diff --git a/content/2.concepts/9.state-manegement/.template/index.ts b/content/en/2.concepts/9.state-manegement/.template/index.ts similarity index 100% rename from content/2.concepts/9.state-manegement/.template/index.ts rename to content/en/2.concepts/9.state-manegement/.template/index.ts diff --git a/content/2.concepts/9.state-manegement/index.md b/content/en/2.concepts/9.state-manegement/index.md similarity index 100% rename from content/2.concepts/9.state-manegement/index.md rename to content/en/2.concepts/9.state-manegement/index.md diff --git a/content/ja/.template/files/app.vue b/content/ja/.template/files/app.vue new file mode 100644 index 00000000..ec252288 --- /dev/null +++ b/content/ja/.template/files/app.vue @@ -0,0 +1,7 @@ + + + diff --git a/content/ja/.template/index.ts b/content/ja/.template/index.ts new file mode 100644 index 00000000..ef7e2068 --- /dev/null +++ b/content/ja/.template/index.ts @@ -0,0 +1,10 @@ +import type { GuideMeta } from '~/types/guides' + +export const meta: GuideMeta = { + startingFile: 'app.vue', + features: { + terminal: false, + fileTree: false, + navigation: false, + }, +} diff --git a/content/ja/.template/solutions/app.vue b/content/ja/.template/solutions/app.vue new file mode 100644 index 00000000..b5f7aa8b --- /dev/null +++ b/content/ja/.template/solutions/app.vue @@ -0,0 +1,8 @@ + + + diff --git a/content/ja/0.index.md b/content/ja/0.index.md new file mode 100644 index 00000000..36bb4e08 --- /dev/null +++ b/content/ja/0.index.md @@ -0,0 +1,49 @@ +--- +ogImage: + props: + title: Nuxt Tutorial + excerpt: Hello + colorMode: dark + description: An interactive tutorial for learning Nuxt +--- + +# Nuxt チュートリアルへようこそ！ + +これは、ガイドとチャレンジで構成されたインタラクティブなチュートリアルで、[Nuxt](https://nuxt.com/) とその概念をステップバイステップで学ぶのに役立ちます。 + +このチュートリアルの目的は、**ブラウザだけ**で Nuxt と Vue を使って開発する感覚をすばやく体験してもらうことです。包括的に理解することは目指しておらず、次に進む前にすべてを理解する必要はありません。全てのプレイグラウンドは、フル機能のエディタと開発環境で編集可能なので、コードを操作してすぐに結果を見ることができ、実際に作りながら学ぶことができます。 + +## Nuxt とは? + +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 の基本的なチュートリアルも提供しています。 + +以下のトピックをクリックして学習を始めてください： + +::div{.flex.flex-wrap.gap-2} +:content-card{to="/ja/vue" title="Vue の基本" description="Vue に馴染みがない場合は、まず Vue の基本を学んでください。" icon="i-logos-vue"} +:content-card{to="/ja/concepts" title="Nuxt の概念" description="Nuxt のコアコンセプトについて学びます。" icon="i-logos-nuxt-icon"} +:: + +## ケーススタディ + +Vue と Nuxt の概念に既に精通している人向けに、実際のアプリケーションで Nuxt をどのように使用するかを理解するためのケーススタディを提供しています： + +::div{.flex.flex-wrap.gap-2} +:content-card{to="/ja" wip title="GitHub プロフィール" description="GitHub のカスタムユーザープロフィールを生成するウェブサイトを作成します" icon="i-ph-user-circle-duotone"} +:content-card{to="/ja" wip title="E コマース" description="商品表示、カート、ログイン機能を持つ基本的な E コマースサイトを作成します" icon="i-ph-shopping-cart-duotone"} +:: + +## このプレイグラウンドについて + +このプレイグラウンド自体も Nuxt で構築されており、以下のツールを使用しています： + +- [WebContainers](https://webcontainers.io/)：ブラウザ内で完全に機能する Node.js 環境を作成し、Nuxt の開発サーバーを実行します。 +- [Nuxt Content](https://content.nuxt.com/)：プレイグラウンドのコンテンツ管理機能です。 +- [Monaco Editor](https://microsoft.github.io/monaco-editor/)：シンタックスハイライトとコード補完を提供するエディタです。 +- [Volar](https://github.com/volarjs/volar.js)：Monaco Editor の Vue と TypeScript の言語サポートを提供します。 + +このプレイグラウンドの構築方法については、[GitHub のソースコード](https://github.com/nuxt/learn.nuxt.com)を参照してください。 diff --git a/content/ja/1.vue/.template/files/app.vue b/content/ja/1.vue/.template/files/app.vue new file mode 100644 index 00000000..fd517244 --- /dev/null +++ b/content/ja/1.vue/.template/files/app.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/content/ja/1.vue/.template/index.ts b/content/ja/1.vue/.template/index.ts new file mode 100644 index 00000000..ef7e2068 --- /dev/null +++ b/content/ja/1.vue/.template/index.ts @@ -0,0 +1,10 @@ +import type { GuideMeta } from '~/types/guides' + +export const meta: GuideMeta = { + startingFile: 'app.vue', + features: { + terminal: false, + fileTree: false, + navigation: false, + }, +} diff --git a/content/ja/1.vue/1.index.md b/content/ja/1.vue/1.index.md new file mode 100644 index 00000000..3699c8bc --- /dev/null +++ b/content/ja/1.vue/1.index.md @@ -0,0 +1,22 @@ +--- +ogImage: true +--- + +# Vueの基本 + +Nuxt は、[Vue.js](https://ja.vuejs.org/) というユーザーインターフェイスを構築するためのプログレッシブなフレームワークを使用しています。このセクションでは、Vue の基本について説明します。\ +エディタに表示されているのは、[Vueシングルファイルコンポーネント](https://ja.vuejs.org/guide/scaling-up/sfc)（SFC）です。 + +SFC は、HTML、CSS、および JavaScript を 1 つの `.vue` ファイル内にまとめた再利用可能な自己完結型のコードブロックです。これは、JavaScript ロジックを定義するための [` + + diff --git a/content/ja/1.vue/2.reactivity/.template/index.ts b/content/ja/1.vue/2.reactivity/.template/index.ts new file mode 100644 index 00000000..ef7e2068 --- /dev/null +++ b/content/ja/1.vue/2.reactivity/.template/index.ts @@ -0,0 +1,10 @@ +import type { GuideMeta } from '~/types/guides' + +export const meta: GuideMeta = { + startingFile: 'app.vue', + features: { + terminal: false, + fileTree: false, + navigation: false, + }, +} diff --git a/content/ja/1.vue/2.reactivity/.template/solutions/app.vue b/content/ja/1.vue/2.reactivity/.template/solutions/app.vue new file mode 100644 index 00000000..cf0457db --- /dev/null +++ b/content/ja/1.vue/2.reactivity/.template/solutions/app.vue @@ -0,0 +1,26 @@ + + + diff --git a/content/ja/1.vue/2.reactivity/index.md b/content/ja/1.vue/2.reactivity/index.md new file mode 100644 index 00000000..7869af3d --- /dev/null +++ b/content/ja/1.vue/2.reactivity/index.md @@ -0,0 +1,40 @@ +--- +ogImage: true +--- + +# リアクティビティー パート１ + +Vue はデータの変更を監視して、変更された時に更新を自動的にトリガーする [優れたリアクティビティシステム](https://ja.vuejs.org/guide/essentials/reactivity-fundamentals) を提供していて、常に最新のデータを UI に反映させることができます。Vue のリアクティビティは、`ref`、`computed`、`watch` があります。 + +- [`ref()`](https://ja.vuejs.org/api/reactivity-core#ref) は単一の値を保持するためのコンテナを作成し、値が変更された時に自動的に追跡できるようにします。値は `.value` を通してアクセスすることができます。 + +- [`computed()`](https://ja.vuejs.org/api/reactivity-core#computed) は getter 関数を受け取り、getter からの返り値を反映した `ref` オブジェクトを返します。 + +ここのプレイグラウンドでは、数字を保持するための `count` という名前の ref オブジェクトと、`count` の倍の値を計算する `doubled` という名前の computed オブジェクトを作成します。Vue は `doubled` が `count` に依存していることを知っているため、`count` が変更された際に `doubled` は自動で再計算されます。 + +ボタンをクリックして `count` の値が増やしてみてください。`doubled` の値も変更が反映されることを確認することができます。 + +::note +**注意**: `