Weekly Vue News #169

Skip Navigation Links

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 ☀️

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.