As Vue 3 classes are contained in attrs
, we sometimes want to pass every prop attribute to the child, except the class
attribute:
v-bind="{ ...attrs, class: undefined }"
Comparing common concepts of web frameworks daily usage.
For each concept, an example in the framework is provided.
Especially what I was looking for :)
const currentSection = ref()
onMounted(() => {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if(entry.intersectionRatio > 0) {
currentSection.value = entry.target.getAttribute('id')
}
})
document.querySelectorAll('article h2').forEach((section) => {
observer.observe(section)
})
})
then add a class to the active currentSection.
May be useful someday
I will give it a try instead of using Storybook for the new projects. Especially with Vue and Vite.
This causes some people to claim that Svelte doesn’t scale, but that’s premature. The real question that matters is: where is that point? Clearly, nobody’s worried about whether React scales, so when does Svelte lose its advantage over React? Turns out: the scale at which Svelte's advantages disappear is actually unrealistically high for just about any application.
But to summarize both: Svelte’s advantage disappears somewhere around 150 kB of components loaded onto the page.
Alternately: are you choosing a technology for a relatively new startup or project? Svelte will likely enable you to move more quickly and build something that’s more performant, but hiring or collaborating may be a challenge, given the relatively small pool of Svelte devs
Pinia is the nest version of Vuex for Vue 3 and this tool looks promising ! The current documentation is up-to-date.
Free for community. Up to 10 user seats.
It has a great interface with Vue 3 and Nuxt : https://www.storyblok.com/mp/storyblok-meets-vue3-nuxt3
A toolkit library for vue 3 ! 👍
Impressive !
In general, I don’t think the question should be whether a component uses its own framework or not. Instead, the question should be: Is this component small enough/fast enough for my use case?
Why not !
In Vue 2, to bind a class from a parent to a child component, the child must have :class="data.staticClass || ''"
Remember that Vuex makes sense if the code is reused or if there are distant components that need to communicate.
Great resource !