We Keep Coding

How to use #heroicons/vue in Nuxt3?

i want to import #heroicons/vue in Nuxt 3 but my icon not appear in frontend.
my setup:
import { HomeIcon, FilmIcon, PlusIcon } from "#heroicons/vue/solid"
my html:
<template v-for="(profileItem, i) in accountSetFields" :key="i">
<ProfileItems :user="user" :item="profileItem" />
<template v-slot:icon>
<component :is="profileItem.icon"></component>
</template>
</ProfileItems>
</template>
the variable profile.Item.icon has a string value of "HomeIcon"
I have tried to pass the value directly to the child component "ProfileItem.vue" but i receive the same error message.
When i pass the value directly as string ("HomeIcon" instead of profile.Item.icon) than it works because it mentioned the attribute from import { HomeIcon, FilmIcon, PlusIcon } from "#heroicons/vue/solid
<component :is="HomeIcon"></component>
Did anyone know how to load the icons dynamically?

That one works well
<script setup>
import { HomeIcon, FilmIcon, PlusIcon } from "#heroicons/vue/24/solid"
const icons = reactive({
home: HomeIcon,
film: FilmIcon,
plus: PlusIcon,
})
</script>
<template>
<component :is="icons.home"></component>
</template>
as explained here, you need the 24 in your import (for the size).
Not sure but this may also help maybe, didn't have to use that myself: https://github.com/tailwindlabs/heroicons/issues/564
Or you can forget about worrying about various icons configuration and fallback to that one (configured once and for all): https://stackoverflow.com/a/72055404/8816585

You can also use it without <component/> and register the icon as a component. Should also work with the composition api.
<template>
<CheckCircleIcon />
</template>
<script>
import { CheckCircleIcon } from "#heroicons/vue/24/solid";
export default {
components: {
CheckCircleIcon,
}
}
</script>

Vue3 - Ref in component?

I'm making input component for my login form instead of creating input tag every time that I need it. However, I want to save the input value at #input event, thing that's I've made before (when I didn't have component) thanks to refs (by writing ref.value.value)
But now, I can't just add ref on my input because they'are component and not an html tag. How can I fix it ? :( I need their value for regExp test
there's before / after of my input
before
after
Thanks for your help

You can try this way (I used Vue3 Composition API + script setup):
Check out the playground I have set up here!
Parent component:
<template>
<Comp v-model="myData.field" />
<br />
{{ myData.field }}
</template>
<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue'
const myData = ref({
field: 'something',
})
</script>
Custom input child component:
<template>
<input
type="text"
#input="$emit('update:modelValue', $event.target.value)"
:value="modelValue"
/>
</template>
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>
Related docs:
https://vuejs.org/guide/components/props.html
https://vuejs.org/api/options-state.html#emits

Pass the ref as a prop and in the input tag put ref.
<InputComponent refProp="email" />
<input :ref="refProp" >

Vue 3: v-model and emit

I'm trying to use Vue3 two-way biding with v-model, but my emit() doesn't update the parent value. Could you please tell me where I'm wrong?
Thank you!
Parent looks like:
<template>
<div class="card">
<LearnersTable
v-model:toActivate="toActivate"
/>
<!-- To control if this is being updated -->
{{ toActivate.length }}
</div>
</template>
<script setup>
[...]
// List of person to activate
const toActivate = [];
</script>
And Children (LearnersTable) looks like:
<template>
[...]
<tr v-for="row in rows" :key="row.id" >
<span>
<Toggle v-model="row.enabled" #change="onChangeActivate(row)"/>
</span>
</tr>
[...]
</template>
<script setup>
const props = defineProps({
toActivate: {
type: Array,
default: () => [],
},
});
const emit = defineEmits(['update:toActivate']);
const {
toActivate,
} = toRefs(props);
function onChangeActivate(row) {
if (row.enabled === true) {
toActivate.value.push(row);
}
emit('update:toActivate', toActivate.value);
}
</script>
I'm omitting a little bit of code here. But the problem is that my emit doesn't work, I don't get the toActivate value updated in the parent.
Thank you !

Try to make it reactive:
<script setup>
import { ref } from 'vue';
// List of person to activate
const toActivate = ref([]);
</script>
and
<LearnersTable
v-model:to-activate="toActivate"
/>

How to target elements inside <script setup> of Vue 3 component?

How can I target the element with test class inside this vue component:
<template>
<div id="test" class="test">
</div>
</template>
<script setup>
console.log(document.querySelector('.test'))
</script>
This component is imported into another component. The console outputs null.

the component is not rendered before that script is run
You want to wait until it is mounted
<template>
<div id="test" class="test">
</div>
</template>
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
console.log(document.querySelector('.test'))
});
</script>
In general, there's hardly ever any need to use DOM methods like that in vue though - I won't say never, because I know as soon as I say that, someone will come up with a valid reason to
I never have though

The best practice is to use ref instead of DOM manipulations methods, and also use onMounted hook to check the element as mentioned in the following example:
<script setup>
import { ref,onMounted } from 'vue'
const input =ref()
onMounted(()=>{
input.value.focus()
})
</script>
<template>
<input ref="input">
</template>

you can use onMounted for target the element inside vue component:
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
console.log(document.querySelector('.test'));
})
</script>
but I recommend use ref instead of DOM manipulations method:
<script setup>
import { ref, onMounted } from 'vue'
const el = ref()
onMounted(() => {
el.value // <div>
})
</script>
<template>
<div ref="el"></div>
</template>
docs: https://vuejs.org/api/composition-api-lifecycle.html#onmounted

Composition API with Nuxt 2 to get template refs array

I'm trying to get the array of element refs that are not in v-for. I'm using #nuxtjs/composition-api on Nuxt 2.
(Truth: I want to make an array of input elements, so that I can perform validations on them before submit)
This sounds too easy on vue 2 as $refs becomes an array when one or more compnents have the same ref name on html. However, this doesn't sound simple with composition api and trying to perform simple task with that got me stuck from long.
So to handle this scenario, I've created 1 composable function. (Soruce: https://v3-migration.vuejs.org/breaking-changes/array-refs.html#frontmatter-title)
// file: viewRefs.js
import { onBeforeUpdate, onUpdated } from '#nuxtjs/composition-api'
export default () => {
let itemRefs = []
const setItemRef = el => {
console.log('adding item ref')
if (el) {
itemRefs.push(el)
}
}
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
return {
itemRefs,
setItemRef
}
}
Here is my vue file:
<template>
<div>
<input :ref="input.setItemRef" />
<input :ref="input.setItemRef" />
<input :ref="input.setItemRef" />
<input :ref="input.setItemRef" />
<input :ref="input.setItemRef" />
<input :ref="input.setItemRef" />
// rest of my cool html
</div>
</template>
<script>
import {
defineComponent,
reactive,
useRouter,
ref
} from '#nuxtjs/composition-api'
import viewRefs from '~/composables/viewRefs'
export default defineComponent({
setup() {
const input = viewRefs()
// awesome vue code here...
return {
input
}
}
})
</script>
Now when I run this file, I don't see any adding item ref logs. And on click of a button, I'm logging input. That has 0 items in the itemRefs array.
What's going wrong?

Nuxt 2 is based on Vue 2, which only accepts strings for the ref attribute. The docs you linked actually refer to new behavior in Vue 3 for ref, where functions are also accepted.
Template refs in Nuxt 2 work the same way as they do in Vue 2 with Composition API: When a ref is inside a v-for, the ref becomes an array:
<template>
<div id="app">
<button #click="logRefs">Log refs</button>
<input v-for="i in 4" :key="i" ref="itemRef" />
</div>
</template>
<script>
import { ref } from '#vue/composition-api'
export default {
setup() {
const itemRef = ref(null)
return {
itemRef,
logRefs() {
console.log(itemRef.value) // => array of inputs
},
}
}
}
</script>
demo
And setup() does not provide access to $refs, as template refs must be explicitly declared as reactive refs in Composition API.