Weekly Vue News — #68 — Change the Interpolation Delimiter

Michael Hoffmann
3 min readNov 21, 2022

--

Hi 👋

Since last week, Nuxt 3 is finally stable 🥳

I’m working on a new blog post about a ToC (Table of Contents) component for Nuxt Content v2.

Additionally, I’m experimenting with short video clips about my tips.

Here is an example: https://www.loom.com/share/0b00767197a64c79b4fa2c2ae0ac5f37

Let me know what you think about these kind of videos.

Have a great week ☀️

Vue Tip: Change the Interpolation Delimiter

It is possible to adjust the delimiters used for text interpolation within the template.

This is typically used to avoid conflicting with server-side frameworks that also use mustache syntax.

The default delimiters are the double curly braces (called mustache syntax): {{ }}

We can change the delimiter in the config object of the application instance:

Image created with CodeSnap.dev

👉🏻 Try it out

⚠️ Important

The compilerOptions config option is only respected when using the full build (i.e. the standalone vue.js that can compile templates in the browser).

If you are using the runtime-only build with a build setup, checkout the official docs.

Curated Vue Content

📕 Nuxt 3 State Management: Pinia vs useState

www.vuemastery.com

👉🏻 In this article, Michael discusses the main differences between Pinia and useState and when to use each.

📕 Is Turbopack really 10x Faster than Vite?

github.com

👉🏻 Vue and Vite’s Evan You decided to run some benchmarks and ended up pretty deep down the rabbit hole.

🛠️ Online Options API to Composition API converter for Vue

tjk.github.io

JavaScript Tip: Manipulate URLs

JavaScript has a built-in API that allows you to easily manipulate URLs and get their search parameters:

Image created with CodeSnap.dev

Curated Web Development Content

📕 The State of Frontend in 2022 survey

tsh.io

👉🏻 “real day-to-day perspective from frontend professionals of all levels and backgrounds.”

👉🏻 I love to see Vue on the third place of used & liked frameworks 💚

📕 What is a realm in JavaScript?

weizman.github.io

👉🏻 A realm is essentially the complete execution environment for a JavaScript program.

👉🏻 Interesting if you want to know how JavaScript works under the hood.

📕 State of CSS 2022

web.dev

👉🏻 This post is the article form of the State of CSS talk given at Google IO 2022.

👉🏻 It provides a brief overview of the new features and resources for more information.

📹 Programming in TypeScript

www.freecodecamp.org

👉🏻 5 hour YouTube course.

👉🏻 This beginner course will teach you everything you need to get started coding TypeScript.

🛠️ JavaScript Booster (VS Code Extension)

marketplace.visualstudio.com

👉🏻 Add quick actions to VS Code.

👉🏻 Useful for IntelliJ users who are used to these handy actions.

🛠️ 98.cssjdan.github.io

👉🏻 98.css is a CSS library for building interfaces that look like Windows 98

Quote of the Week

--

--

Michael Hoffmann
Michael Hoffmann

Written by Michael Hoffmann

Senior Frontend Developer (Freelancer) from Germany focused on Vue.js

No responses yet