feat: use @nuxt/image

Add example how to use `@nuxt/image` to load an image. Closes #265
jojomatik · Sep 1, 2023 · 117214a · 117214a · vercel · Sep 1, 2023
1 parent 7c9756a
commit 117214a
Show file tree

Hide file tree

Showing 5 changed files with 265 additions and 20 deletions.
diff --git a/app.vue b/app.vue
@@ -5,11 +5,12 @@
         <div style="display: flex; align-items: center">
           Nuxt 3 Base by
           <a href="https://github.com/jojomatik" class="pl-1">
-            <v-img
-              :src="jojomatikLogo"
+            <nuxt-img
+              src="/assets/jojomatik.png"
               width="120"
+              preload
               alt="Jojomatik Logo"
-            ></v-img>
+            ></nuxt-img>
           </a>
         </div>
       </v-app-bar-title>
@@ -20,8 +21,6 @@
 </template>
 
 <script setup lang="ts">
-import jojomatikLogo from "assets/jojomatik.png";
-
 const i18n = useI18n();
 
 useHead({ htmlAttrs: { lang: i18n.locale.value } });
@@ -31,7 +30,7 @@ useSeoMeta({
   ogTitle: i18n.t("title"),
   description: i18n.t("description"),
   ogDescription: i18n.t("description"),
-  ogImage: jojomatikLogo,
+  ogImage: "/assets/jojomatik.png",
 });
 </script>
 

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -37,7 +37,7 @@ export default defineNuxtConfig({
     },
   },
   css: ["vuetify/styles"],
-  modules: ["@nuxtjs/i18n", "@nuxtjs/robots"],
+  modules: ["@nuxt/image", "@nuxtjs/i18n", "@nuxtjs/robots"],
   hooks: {
     "nitro:build:before": () => {
       const fontsDir = "public/assets/fonts/";

diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@fontsource/roboto": "^5.0.8",
     "@mdi/js": "^7.2.96",
+    "@nuxt/image": "^1.0.0-rc.1",
     "nuxt": "^3.7.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",

diff --git a/assets/jojomatik.png → public/assets/jojomatik.png b/assets/jojomatik.png → public/assets/jojomatik.png