DEV Community: Salvador García

Vue 3 Tip / Detect outside click

Salvador García — Sun, 14 Aug 2022 02:14:00 +0000

You need three things for this

NOTE: Options Api gist here

1- A compontent ref like this:


<template>
  <div
    ref="componentRef"
    class="general-style"
  >
  </div>
</template>

<script setup>
import { ref } from 'vue'

const componentRef = ref()
</script>

2- The next composable:

import {onBeforeUnmount, onMounted} from 'vue'

export default function useDetectOutsideClick(component, callback) {
    if (!component) return
    const listener = (event) => {
        if (event.target !== component.value && event.composedPath().includes(component.value)) {
            return
        }
        if (typeof callback === 'function') {
            callback()
        }
    }
    onMounted(() => { window.addEventListener('click', listener) })
    onBeforeUnmount(() => {window.removeEventListener('click', listener)})

    return {listener}
}

3- Use within your component and send the ref as composable param:


<template>
  <div
    ref="componentRef"
    class="general-style"
  >
  </div>
</template>

<script setup>
import { ref } from 'vue'
import useDetectOutsideClick from '/useDetectOutsideClick'

const componentRef = ref()
const exampleComposableText = ref('hello')

useDetectOutsideClick(componentRef, () => { 
exampleComposableText.value = 'edit hello'
})
</script>

Summary: Just declare a ref, point the ref to the template element and send it to the composable as first parameter. The second parameter of the composable is the callback what do you want to execute when clicked out.

Happy Code!

Vue Tip / Same component, different route

Salvador García — Mon, 07 Feb 2022 20:26:30 +0000

Let's get to the point. As developers we look for a high level of reusability in our components, this is why Vue doesn't re-render the parent component when used in two different paths despite not being the same view, but the same component. This is done by Vue to optimize the app. To solve this problem, just add a key to the router-view as the name of the route or the path.

  <template>
    <div>
       <! --- Or $route.path --->
      <router-view :key="$route.name" />
    </div>
  </template>

I hope it helps

Happy Coding! :v

Vue Tip // v-model on custom component input type="file"

Salvador García — Wed, 01 Sep 2021 23:53:14 +0000

Hi everyone. Let's get to the point. A few days ago I needed to use v-model in a component of my own that I needed to capture a file in an input of type file. After trying a bit, the solution was the following:

<template>

  <input type="file" @change="onChangeFile" name="file" />

</template>

<script>
  methods: {
    onChangeFile(event) {
      this.$emit('update:modelValue', event.target.files[0])
    }
</script>

//Your component made in Vue 3
<MyInputFileComponent v-model="file" />

This is the easiest way to use it. If you need to capture many files you just have to go through the list of files found in the e.target.files

I share this information in case there is anyone out there looking for a solution for this scenario. Happy dev.