Merge pull request #26 from ojvribeiro/feat-image-component

feat(core): create `Image` component

.vulmix/assets/img/README.md

@@ -0,0 +1,3 @@
+# `.vulmix/assets/img`
+
+All your images will be compiled here.

.vulmix/components/Image.vue

@@ -0,0 +1,76 @@
+<template>
+  <img
+    :src="imgSrc"
+    :width="width"
+    :height="height"
+    :alt="props.alt"
+    :title="props.title"
+    :loading="targetIsVisible ? 'eager' : 'lazy'"
+    ref="imageEl"
+  />
+</template>
+
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import { useElementSize, useElementVisibility } from '@vueuse/core'
+
+  const props = defineProps({
+    src: {
+      type: String,
+      default: '',
+    },
+    width: {
+      type: String,
+    },
+    height: {
+      type: String,
+    },
+    alt: {
+      type: String,
+      default: 'Image',
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    webp: {
+      type: String,
+      default: 'true',
+    },
+  })
+
+  const imageEl = ref(null)
+  const imgSrc = ref(props.src)
+
+  const { width, height } = useElementSize(imageEl)
+  const targetIsVisible = useElementVisibility(imageEl)
+
+  function replace(size) {
+    imgSrc.value = props.src.replace(
+      /\/assets\/img\/(|.*)([a-zA-Z0-9_-])\.(png|jpg|jpeg|gif)$/i,
+      `/.vulmix/assets/img/$1$2@${size}.${
+        props.webp === 'true' ? 'webp' : '$3'
+      }`
+    )
+  }
+
+  onMounted(() => {
+    if (imageEl.value.width < 300) {
+      replace('300')
+    } else if (imageEl.value.width >= 301 && imageEl.value.width < 600) {
+      replace('600')
+    } else if (imageEl.value.width >= 601 && imageEl.value.width < 900) {
+      replace('900')
+    } else if (imageEl.value.width >= 901 && imageEl.value.width < 1200) {
+      replace('1200')
+    } else {
+      replace('1920')
+    }
+  })
+</script>
+
+<style scoped lang="scss">
+  img {
+    background-color: rgba(#000, 10%);
+  }
+</style>

.vulmix/mix.js

@@ -1,6 +1,8 @@
 const mix = require('laravel-mix')
+const config = require('../webpack.config.js')
 
 require('laravel-mix-serve')
+require('laravel-mix-simple-image-processing')
 
 class VueMixInit {
   name() {
@@ -11,6 +13,8 @@ class VueMixInit {
     mix
       .setPublicPath('.dist/')
 
+      .webpackConfig(config)
+
       .serve(
         'npx http-server -p 8000 -a localhost -c-1 --proxy http://localhost:8000?',
         {
@@ -25,6 +29,18 @@ class VueMixInit {
         devtool: 'source-map',
       })
 
+      .imgs({
+        source: 'assets/img',
+        destination: '.vulmix/assets/img',
+        webp: true,
+        thumbnailsSizes: [1920, 1200, 900, 600, 300, 50],
+        smallerThumbnailsOnly: true,
+        thumbnailsOnly: true,
+        imageminWebpOptions: {
+          quality: 90,
+        },
+      })
+
       .sass('.vulmix/assets/sass/main.scss', '.dist/.vulmix/dist/css')
 
       .js('.vulmix/main.js', '.dist/.vulmix/dist/js')

components/MyComponent.vue

@@ -1,7 +1,14 @@
 <template>
-  <div class="p-8 bg-slate-600 text-white rounded-xl w-fit">
-    <h2 class="text-3xl mb-6">My test component</h2>
+  <div class="p-8 bg-slate-600 text-white rounded-xl w-fit max-w-full flex flex-col md:flex-row gap-6">
+    <Image
+      class="w-[400px] max-w-full aspect-square object-cover object-bottom rounded-xl"
+      src="/assets/img/sample.jpg"
+    />
 
-    <p>Here's some paragraph for ya.</p>
+    <div>
+      <h2 class="text-3xl mb-6">My test component</h2>
+
+      <p>Here's some paragraph for ya.</p>
+    </div>
   </div>
 </template>

package.json

@@ -1,10 +1,10 @@
 {
   "name": "vulmix",
-  "version": "0.0.2-alpha",
+  "version": "0.1.0-alpha",
   "description": "Tiny boilerplate to work with Vue and Laravel Mix.",
   "main": "index.js",
   "scripts": {
-    "serve": "npx http-server -p 8000 -a localhost -c-1 --proxy http://localhost:8000?",
+    "serve": "npx http-server -p 8000 -a localhost --proxy http://localhost:8000?",
     "build": "mix",
     "watch": "mix watch",
     "dev": "mix watch",
@@ -13,21 +13,25 @@
   "author": "Victor Ribeiro",
   "license": "MIT",
   "devDependencies": {
-    "laravel-mix": "^6.0.49",
-    "vue": "^3.2.37",
-    "vue-loader": "^16.8.3",
-    "vue-router": "^4.1.3",
     "@vue/compiler-sfc": "^3.2.37",
-    "sass": "^1.54.5",
-    "sass-loader": "^10.3.1",
+    "@vueuse/core": "^9.2.0",
+    "autoprefixer": "^10.4.8",
     "browser-sync": "^2.27.10",
     "browser-sync-webpack-plugin": "^2.3.0",
-    "resolve-url-loader": "^5.0.0",
+    "imagemin-jpegtran": "^7.0.0",
+    "laravel-mix": "^6.0.49",
+    "laravel-mix-serve": "^2.2.2",
+    "laravel-mix-simple-image-processing": "^1.0.7",
     "path": "^0.12.7",
     "postcss": "^8.4.16",
-    "autoprefixer": "^10.4.8",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.54.5",
+    "sass-loader": "^10.3.1",
     "tailwindcss": "^3.1.8",
-    "laravel-mix-serve": "^2.2.2"
+    "vue": "^3.2.37",
+    "vue-loader": "^16.8.3",
+    "vue-router": "^4.1.3",
+    "webpack": "^5.74.0"
   },
   "dependencies": {}
 }

webpack.config.js

@@ -0,0 +1,15 @@
+const path = require('path')
+
+module.exports = {
+  resolve: {
+    extensions: ['.js', '.vue'],
+    alias: {
+      '@': path.resolve(__dirname, '.vulmix'),
+      '@assets': path.resolve(__dirname, 'assets'),
+      '@components': path.resolve(__dirname, 'components'),
+      '@composables': path.resolve(__dirname, 'composables'),
+      '@pages': path.resolve(__dirname, 'pages'),
+      '@sass': path.resolve(__dirname, 'assets/sass'),
+    },
+  },
+}

webpack.mix.js

@@ -1,19 +1,9 @@
 const mix = require('laravel-mix')
-const path = require('path')
 
 require('./.vulmix/mix.js')
 
 mix
   .vueMix()
 
-  .alias({
-    '@': path.join(__dirname, '.vulmix'),
-    '@assets': path.join(__dirname, 'assets'),
-    '@components': path.join(__dirname, 'components'),
-    '@composables': path.join(__dirname, 'composables'),
-    '@pages': path.join(__dirname, 'pages'),
-    '@sass': path.join(__dirname, 'assets/sass'),
-  })
-
   .sass('assets/sass/main.scss', '.dist/css')