トップページの作成

nuxt.config.ts

@@ -2,5 +2,12 @@ import { defineNuxtConfig } from 'nuxt3'
 
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({
-
+    buildModules: [
+        'nuxt-windicss',
+    ],
+    meta: {
+        link: [
+            { rel: 'icon', type: "image/svg+xml", href: 'favicon.svg' }
+        ],
+    },
 })

package.json

@@ -6,6 +6,7 @@
     "start": "node .output/server/index.mjs"
   },
   "devDependencies": {
+    "nuxt-windicss": "^2.1.1",
     "nuxt3": "latest"
   }
 }

pages/index.vue

@@ -1,3 +1,16 @@
 <template>
-<h1>みが市役所広報課だより</h1>
+<div class="relative overflow-hidden h-screen">
+    <img src="/img/20210811_002.jpg" class="absolute h-full min-w-full object-cover" />
+    <div class="inset-0 bg-black opacity-25 absolute"></div>
+    <div class="container mx-auto px-6 md:px-12 relative z-10 flex items-center py-32 xl:py-40">
+        <div class="lg:w-3/5 xl:w-2/5 flex flex-col items-start relative z-10 xl:mx-auto">
+            <h1 class="font-bold text-3xl sm:text-4xl text-white leading-tight mt-4 xl:mx-auto">みが市役所広報課だより</h1>
+            <p class="text-white xl:mx-auto">せつめい</p>
+            <ul class="px-6 mb-4 xl:mx-auto">
+                <li><p class="center block bg-white hover:bg-gray-100 py-3 px-4 rounded-lg text-lg text-gray-800 font-bold mt-10 cursor-pointer xl:mx-auto">ギャラリー</p></li>
+            </ul>
+            <p class="text-white xl:mx-auto">produced by みが市 members</p>
+        </div>
+    </div>
+</div>
 </template>

tsconfig.json

@@ -1,4 +1,9 @@
 {
   // https://v3.nuxtjs.org/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "nuxt-windicss"
+    ]
+  }
 }