Javascript is required
Weekly Vue News Logo
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 8px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #118 - Accessing Template Ref in Child Component #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #118

Accessing Template Ref in Child Component

Hi ๐Ÿ‘‹

I'm making good progress on the new editor of CodeSnap.dev. I hope to ship it before end of the year ๐Ÿคž๐Ÿป.

Have a lovely week โ˜€๏ธ


To support me:

Vue ๐Ÿ“• Why I chose Vue over React
๐Ÿ‘‰๐Ÿป The author explains why he chose the best frontend framework available.
medium.com
๐Ÿ“• How we migrated our Vue 2 enterprise project to Vue 3
๐Ÿ‘‰๐Ÿป How a team migrated a Vue enterprise project from Vue 2 to Vue 3 step-by-step without getting blocked from releasing new features.
dbsystel.github.io
๐Ÿ“• Benefits of using Pinia as your Vue.js state management solution
๐Ÿ‘‰๐Ÿป This article explores the benefits of choosing Pinia as your Vue.js state management solution.
masteringpinia.com
๐Ÿ“• Vueform is Now Open-Source ๐Ÿ”ฅ
๐Ÿ‘‰๐Ÿป Vueform has become open-source and available on GitHub under MIT license, including all its elements and features.
vueform.com
Nuxt Nuxt UI Pro is out โœจ

UI Pro is a collection of premium components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.

It's free in development to try it out ๐Ÿ’š

๐Ÿ“น Is your content actually server-rendered!?
๐Ÿ‘‰๐Ÿป In this video, you'll learn a dead simple technique to verify if content was rendered on the server.
www.youtube.com
๐Ÿ“น Nuxt Modules Course
๐Ÿ‘‰๐Ÿป You should watch this video if you would like to build a Nuxt module.
youtu.be
๐Ÿ“… EventsVueConf Toronto 2023
๐Ÿ‘‰๐Ÿป 9 - 10 November 2023, Toronto, Canada
๐Ÿ‘‰๐Ÿป Checkout the full program at http://vuetoronto.com/schedule.
www.vuetoronto.com
vueday 2023
๐Ÿ‘‰๐Ÿป 10 November 20230, Verona
2023.vueday.it
Vuejs Amsterdam 2024
๐Ÿ‘‰๐Ÿป 28 - 29 February 2024, Amsterdam
vuejs.amsterdam
๐Ÿ’ฌ Quote of the week๐Ÿ”ฅ Vue Tip: Accessing Template Ref in Child Component

Sometimes you need to access a template ref of a nested component. For example, you want to focus an input field in a child component from the parent component.

Let's take a look at how you can do this in Vue 3:

<script setup lang="ts"> import { ref } from 'vue'; const innerChildRef = ref<HTMLElement | null>(null); defineExpose({ innerChildRef, }); </script> <template> <div ref="innerChildRef"> <!-- child content --> </div> </template>

In the child component, we define a template ref called innerChildRef and expose it to the parent component using defineExpose().

Now you can access this template ref in the parent component:

<script setup lang="ts"> import { ref, onMounted } from 'vue'; import Child from './components/Child.vue'; const child = ref(null); onMounted(() => { if (child.value) { console.log('Inner Child ref', child.value.innerChildRef); } }); </script> <template> <Child ref="child" /> </template>

Try it yourself in the following StackBlitz project:

โšก Open Demo๐Ÿ˜‚ Fun๐Ÿง‘๐Ÿปโ€๐Ÿ’ป In Other News๐Ÿ“• Front End Developer Roadmap
๐Ÿ‘‰๐Ÿป In this article, you'll get a brief overview of the technologies you will learn as part of freeCodeCamp's frontend developer learning path.
www.freecodecamp.org
๐Ÿ“• Hydration, the Saboteur of Lazy Loading
๐Ÿ‘‰๐Ÿป Hydration is often seen as a silver bullet for performance, but there are caveats.
www.builder.io
๐Ÿ“• 7 simple habits of the top 1% of engineers
๐Ÿ‘‰๐Ÿป These habits include sticking to a consistent standard of coding, deep domain knowledge in at least one field, being detached from their code, and being more visible.
engineercodex.substack.com
๐Ÿ› ๏ธ PureImage
๐Ÿ‘‰๐Ÿป A browser-like 2D canvas experience in Node but without any native dependencies.
github.com
๐Ÿ› ๏ธ Effect
๐Ÿ‘‰๐Ÿป Effect is a TypeScript library designed to help developers quickly create complex, synchronous, and asynchronous programs.
www.effect.website
๐Ÿ› ๏ธ QX82 Retro JavaScript Engine
๐Ÿ‘‰๐Ÿป A tiny Javascript engine that lets you create games and experiences inspired by the look and feel of a retro 80s computer.
๐Ÿ‘‰๐Ÿป It's open source.
btco.github.io
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
Make sure to stay up to date about new features, best articles and tools in the Vue & Nuxt ecosystem by subscribing to the newsletter.Get one email per week | 100% free
I will never share any of your personal data.
Michael ThiessenDan VegaKareem DabbeetAhmed Ragab
Join - other Vue developers
ยฉ 2023 weekly-vue.news. All rights reserved.