init git

pages/blog/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <NuxtLayout :name="device" :config="config">
+        <main class="blog">
+            <BlogCategories v-if="device == 'desktop'" />
+            <BlogList />
+            <BlogAside />
+        </main>
+    </NuxtLayout>
+</template>
+
+<script setup>
+const config = reactive({
+    mobile: { header: { search: true, menu: true }, navigation: false },
+})
+
+const { sidebar, device } = inject('service')
+const route = useRoute()
+const { page = 1, ...params } = route.query
+
+const { status, data, error } = await useFetch(`/api/posts/${page}`, { params })
+
+if (status.value == 'success') {
+    sidebar.is = resolveComponent('BlogCategories')
+    sidebar.props = { data }
+    useSeoMeta(data.value.meta || {})
+    provide('data', data.value)
+}
+else throw createError(error.value)
+
+</script>
+
+<style lang="scss">
+.blog {
+    @apply w-full mx-auto flex flex-col gap-12 lg:gap-6 py-[1.9rem] lg:pt-12 lg:pb-[7.1rem];
+    @apply lg:flex-row lg:px-6 justify-around 2xl:justify-start 2xl:items-start container 2xl:max-w-[120rem];
+    @apply min-[1725px]:justify-between;
+}
+</style>