Hi 👋

I've been looking into the job market, and it's tough out there.

Freelance Vue & Nuxt projects are nearly nonexistent in Germany right now, and it seems like the whole industry is in a bit of a slowdown. Let's keep our fingers crossed that things pick up soon.

Meanwhile, I've got some great content for you in this issue to keep the learning going!

Have a lovely week ☀️

Sponsored Nuxt Nation 2024 x Vue.js Forge Ep5 🗓️ When: November 12-14 💸 FREE to attend! Join the Nuxt Nation online conference for the latest updates on Nuxt, with live panels, Q&As, and insights from Evan You, Sebastien Chopin, Anthony Fu, and others, covering topics from Nuxt 4 and VoidZero to Nuxt Auth and Nuxt UI. Then, dive into Vue.js Forge for hands-on coding sessions with Vue experts.

Vue

📕 How to Create a Modern App with Django and Vue

👉🏻 In this tutorial, you learn how to create a modern single-page application using Django as the backend, Vue as the frontend, and GraphQL as the API manipulation language that connects them together.

📕 Create a Native-Like App in 4 Steps: PWA Magic with Vue 3 and Vite

👉🏻 This blog post explains how to use Vite PWA to generate a PWA with Vue 3.

👉🏻A full GitHub example is included.

📹 Master Vue in 15 Minutes: From React Developer to Vue Pro

👉🏻 A video specifically for React developers transitioning to Vue.

👉🏻 In just 15 minutes, the author breaks down Vue's core concepts, compares them to React, and helps you smoothly transfer your skills.

📹 How to Pick a JavaScript Framework

👉🏻 The Syntax team breaks down when frameworks like Vue, Svelte, and Astro are worth it—and when they might just add complexity.

🛠️ Brand-new Tailwind version of PrimeVue

👉🏻 90+ Vue UI Components with Tailwind

👉🏻 Intellisense Support

👉🏻 Fully customizable with code ownership model

👉🏻 No APIs, no overrides, no JS

👉🏻 Production Ready

👉🏻 Open Source

💡 Vue Tip: Skip Navigation Links

You should put a link at the top of each page that takes users straight to the main part of the page. This helps users skip parts of the page that are repeated many times.

It's usually done at the top of App.vueApp.vue, since it's the first thing people notice on your pages:

1<ul class="skip-links">
2  <li>
3    <a href="#main" ref="skipLink" class="skip-link">
4      Skip to main content
5    </a>
6  </li>
7</ul>

To hide the link unless it is focused, you can add the following style:

1.skip-link {
2  white-space: nowrap;
3  margin: 1em auto;
4  top: 0;
5  position: fixed;
6  left: 50%;
7  margin-left: -72px;
8  opacity: 0;
9}
10
11.skip-link:focus {
12  opacity: 1;
13  background-color: white;
14  padding: 0.5em;
15  border: 1px solid black;
16}

When a user switches routes, bring focus back to the skip link. Focus on the skip link's template ref can be achieved by calling focus on the skip link's template ref (assuming usage of vue-routervue-router):

1<script setup>
2import { ref, watch } from 'vue'
3import { useRoute } from 'vue-router'
4
5const route = useRoute()
6const skipLink = ref()
7
8watch(
9  () => route.path,
10  () => {
11    skipLink.value.focus()
12  }
13)
14</script>

For more information, check out the documentation on skip link to main content

Nuxt

📕 Nuxt on AWS with SST

👉🏻 You can now create and deploy a Nuxt app to AWS with SST.

🛠️ nuxi vs nuxt

👉🏻 Daniel Roe briefly explains what's the difference between running nuxtnuxt and nuxinuxi from the command line.

🛠️ Chat with PDF

👉🏻 An open-source, full-stack AI-powered application with Nuxt to ask questions about PDF documents.

🛠️ Cursorful

👉🏻 A Chrome extension that automatically creates beautiful browser recordings with pans and zooms that help emphasize your actions.

👉🏻 Built with Nuxt.

🛠️ Nuxt Formkit Tempo

👉🏻 The unofficial Nuxt module port of @formkit/tempo@formkit/tempo.

📅 Events

Nuxt Nation (12 - 13 November 2024, Virtual Conference)

VueConf Toronto (18 - 20 November 2024, Toronto, Canada)

Vuejs Amsterdam (12 - 13 March 2025, Amsterdam, Netherlands)

💬 Quote of the week

🧑🏻‍💻 In Other News

📕 Unit Tests As Documentation

👉🏻 Unit tests can serve as living documentation within the code itself, explaining how code behaves, staying in sync with code changes, and covering edge cases.

📕 Dark Patterns Hall of Shame

👉🏻 The Hall of Shame critiques poor design practices and dark patterns, specifically in websites, apps, and user experiences.

🛠️ Atomic CSS Devtools

👉🏻 This new Chrome extension creates a compact view of an element's property & values and allows you to quickly toggle and change them.

🛠️ FTWA

👉🏻 Allows users to turn any website into a lightweight, fast, and visually appealing app.

👉🏻 It removes the need for browser frames and creates a native app-like experience.

😂 Fun

🔗 Want more Vue & Nuxt content?

More Exclusive Vue Tips: Join Michael Thiessen's newsletter and get great Vue tips and insights delivered to your inbox each week.

Weekly Vue & Nuxt Videos: You must subscribe Alexander Lichter's YouTube channel if you are interested in Vue & Nuxt.

DejaVue Podcast: A weekly podcast about Vue.js and the ecosystem around it.

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

* Some of my links are affiliate links; if you make a purchase, I gain a small percentage at no extra cost. Thank you for supporting my newsletter.