✨ Nuxt content tool chain

pages/index.vue

@@ -42,9 +42,13 @@
 </template>
 
 <script setup lang="ts">
+import { getLocale } from "~/utils/locale"
+
 const { t } = useI18n()
 
-const { data: products } = await useAsyncData("products", () => queryContent("/products").where({ archived: { $ne: true } }).limit(5).find())
+const { data: products } = await useAsyncData("products", () => {
+  return queryContent("/products").where({ _locale: getLocale(), archived: { $ne: true } }).limit(5).find()
+})
 </script>
 
 <style scoped>

pages/products/[...slug].vue

@@ -26,7 +26,7 @@
     </v-card>
 
     <article class="text-base prose xl:text-lg mx-auto">
-      <content-doc>
+      <content-renderer :value="page">
         <template #empty>
           <v-empty-state
             icon="mdi-image-broken-variant"
@@ -39,19 +39,9 @@
             </template>
           </v-empty-state>
         </template>
-        <template #not-found>
-          <v-empty-state
-            icon="mdi-flask-empty-remove-outline"
-            text="We haven't this product, yet."
-            title="Not Found"
-            class="no-content-placeholder"
-          >
-            <template #actions>
-              <v-btn prepend-icon="mdi-list-box" variant="plain" text="Back to index" to="/products" exact />
-            </template>
-          </v-empty-state>
-        </template>
-      </content-doc>
+
+        <content-renderer-markdown :value="page" />
+      </content-renderer>
     </article>
   </v-container>
 </template>
@@ -67,7 +57,14 @@
 const route = useRoute()
 
 const { t } = useI18n()
-const { data: page } = await useAsyncData("page", queryContent(route.path).findOne)
+const { data: page } = await useAsyncData<any>("page", queryContent(route.path).where({ _locale: getLocale() }).findOne)
+
+if (page.value == null) {
+  throw createError({
+    status: 404,
+    statusMessage: "Product Not Found",
+  })
+}
 </script>
 
 <style scoped>

pages/products/index.vue

@@ -28,13 +28,17 @@
 </template>
 
 <script setup lang="ts">
+import { getLocale } from "~/utils/locale"
+
 useHead({
   title: "Products",
 })
 
 const { t } = useI18n()
 
-const { data: products } = await useAsyncData("products", () => queryContent("/products").find())
+const { data: products } = await useAsyncData("products", () => {
+  return queryContent("/products").where({ _locale: getLocale() }).find()
+})
 </script>
 
 <style scoped>