Weekly Vue News #158 - Simple Routing Without Using External Libraries

Weekly Vue News #158 Simple Routing Without Using External Libraries View online Hi 👋 While I again don't have personal news to share, I'm busy creating new content for future issues and enjoying family time in the nice weather. This issue features a great Vue tip on implementing simple routing in Vue without external libraries. Dive in and enjoy! Have a lovely week ☀️ Vue 📕 How to Build Your Own Vue-like Reactivity System from Scratch 👉🏻 This tutorial demystifies Vue's reactivity by building our own versions of ref() and watchEffect(). 👉🏻 By the end, you'll have a deeper understanding of reactive programming in frontend development. 📕 Vue.js and HTML Injection Explained 👉🏻 Usually use cases for v-html include the ability for users to provide formatted content. 👉🏻 Think twice though before slapping v-html on your site and calling it a day. 📕 ~~New~~ Old way to write CSS 👉🏻 An article about CSS encapsulation and how you how we can write styles in an old way, but with better developer experience (DX). 👉🏻 Includes framework specific tooling for Vue. 🛠️ vue-dompurify-html 👉🏻 Safe replacement for the v-html directive in Vue. Vue Tip: Simple Routing Without Using External Libraries Usually, you would use a library like Vue Router to handle routing in your Vue.js application. However, if you want to keep things simple and avoid adding extra dependencies, you can implement basic routing functionality without using external libraries. It can be achieved by using Dynamic Components and updating the current component state by listening to browser hashchange events or using the History API. Here's a simple example of how you can implement routing without using external libraries in a Vue.js application: 1<script setup lang="ts"> 2import { ref, computed } from 'vue' 3import Home from './Home.vue' 4import About from './About.vue' 5import NotFound from './NotFound.vue' 6 7const routes = { 8 '/': Home, 9 '/about': About 10} 11 12const currentPath = ref(window.location.hash) 13 14window.addEventListener('hashchange', () => { 15 currentPath.value = window.location.hash 16}) 17 18const currentView = computed(() => routes[currentPath.value.slice(1) || '/'] || NotFound) 19</script> 20 21<template> 22 <a href="#/">Home</a> | 23 <a href="#/about">About</a> | 24 <a href="#/non-existent-path">Broken Link</a> 25 <Component :is="currentView" /> 26</template> You can try out this example on StackBlitz: ✨ Open Demo 💚 Want More Exclusive Vue Tips Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week. Nuxt 📕 How To Build A Multilingual Website With Nuxt.js 👉🏻 In this step-by-step tutorial, you'll learn how to handle translations for multilingual websites with Nuxt. 📕 Using Nuxt Content: Working with Remote Markdown Files 👉🏻 This article discusses how to get started with Nuxt Content to create a minimal blog, and how to work with remote Markdown files. 📕 How to Conditionally Run Code Only on the Server or Only on the Client in a Nuxt App 👉🏻 Discover how Nuxt improves performance and SEO with its server-side and client-side rendering capabilities. 🛠️ Nuxt UI v2.18 is out 👉🏻 Ships with the official nuxt/icon module with zero configuration and a much better UX. 👉🏻 It now works much better with SSR (no flicking on the client side) and no longer relies on Tailwind CSS to bundle icons. 📅 Events PrageVue 2024 (17 September 2024, Prag, Czech Republic) vuejs.de Conf (8 - 9 October 2024, Bonn, Germany) Vue Fes Japan 2024 (19 October 2024, Otemachi, Japan) VueConf Toronto (18 - 20 November 2024, Toronto, Canada) 💬 Quote of the week 🧑🏻‍💻 In Other News 📕 Google's secret to painless code reviews 👉🏻 Google's internal code review tool Critique is highly rated among software engineers. 👉🏻This article looks at what makes Critique so good and explains how it pairs with Google's process of code review. 📕 Providing Type Definitions for CSS with @property 👉🏻 The @property at-rule in CSS allows defining custom properties with specific types, inheritance, and initial values. 👉🏻Improving custom property reliability by preventing unexpected behavior caused by invalid values. 🎮 Artifacts MMO 👉🏻 A sandbox MMORPG where you can use any programming language to control your characters. 🛠️ Rendley 👉🏻A video editing SDK that enables JavaScript video editing in the browser. 👉🏻 All processing is done client-side. 😂 Fun Comments? Join the discussion about this issue in our Discord community. Until next week, Michael Hoffmann (Curator) To support me: 😘 Recommend the newsletter to your friends: it really helps! 💸 Sponsor this newsletter 🧵 Repost the latest X thread 📨 Reply to this email: feedback is welcome Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany