Merge pull request #10 from damisparks:feat/damisparks-add-nuxt-image

feat(develop): add nuxt image

.eslintrc.cjs

@@ -2,5 +2,5 @@ module.exports = {
   root: true,
 
   // https://github.com/nuxt/eslint-config
-  extends: ["@nuxtjs/eslint-config-typescript"],
-};
+  extends: ['@nuxtjs/eslint-config-typescript']
+}

README.md

@@ -8,12 +8,12 @@
 * 🍍 [Official Vue State & Store Management (Pinia)](https://pinia.vuejs.org/)
 * ✨ [Eslint Nuxt](https://github.com/nuxt/eslint-config)
 * 🐕 [Husky](https://github.com/typicode/husky) & [Lint-staged](https://github.com/okonet/lint-staged)
+* Use [Nuxt Image](https://github.com/nuxt/image#readme)
 
 
 ## TODO
 
 * 📱 Mobile Detect module [@nuxtjs/device](https://www.npmjs.com/package/@nuxtjs/device/v/3.0.0?activeTab=readme)
-* [Nuxt Image](https://github.com/nuxt/image#readme)
 
 ## Setup
 

nuxt.config.ts

@@ -1,6 +1,6 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
+// Doc: https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/google-fonts', '@pinia/nuxt'],
+  modules: ['@nuxtjs/tailwindcss', '@nuxtjs/google-fonts', '@pinia/nuxt', '@nuxt/image-edge'],
   app: {
     head: {
       title:
@@ -9,12 +9,30 @@ export default defineNuxtConfig({
     }
   },
 
+  image: {
+    // Unsplash uses the imgix provider
+    // Doc: https://v1.image.nuxtjs.org/providers/unsplash
+    imgix: {
+      baseURL: 'https://images.unsplash.com/'
+    },
+
+    presets: {
+      main: {
+        modifiers: {
+          format: 'webp',
+          fit: 'cover',
+          quality: '60'
+        }
+      }
+    }
+  },
+
   imports: {
     // store directory for pinia
     dirs: ['store']
   },
 
-  // https://pinia.vuejs.org/ssr/nuxt.html#nuxt-js
+  // Doc: https://pinia.vuejs.org/ssr/nuxt.html#nuxt-js
   pinia: {
     autoImports: [
       // automatically imports `defineStore`
@@ -24,7 +42,7 @@ export default defineNuxtConfig({
     ]
   },
 
-  // https://google-fonts.nuxtjs.org/
+  // Doc: https://google-fonts.nuxtjs.org/
   googleFonts: {
     display: 'swap',
     families: {

package.json

@@ -18,6 +18,7 @@
   },
   "devDependencies": {
     "@nuxt/eslint-config": "0.1.1",
+    "@nuxt/image-edge": "1.0.0-27954023.4cee565",
     "@nuxtjs/eslint-config-typescript": "12.0.0",
     "@nuxtjs/google-fonts": "3.0.0-1",
     "@nuxtjs/tailwindcss": "6.4.1",

pages/index.vue

@@ -7,6 +7,7 @@ const productStore = useProductStore()
       <h1 class="text-4xl">
         Welcome to Nuxity
       </h1>
+      <NuxtImg provider="imgix" class="rounded-md my-2" src="photo-1542831371-29b0f74f9713" preset="main" />
       <p>A Nuxt 3 Minimal Starter template packed with a few features.</p>
       <p>
         <span>You have</span>