Elevating Vue.js Development: The Rise of TypeScript in the Nuxt.js Ecosystem

Introduction

Section 1: Core Concepts of Typed Nuxt Development

The Script Setup Syntax

<script setup lang="ts">
// Defining a strict interface for component props
interface UserProfileProps {
  userId: number;
  username: string;
  isAdmin?: boolean; // Optional property
  metadata: {
    lastLogin: Date;
    preferences: string[];
  };
}

// Using defineProps with the generic type argument
const props = defineProps<UserProfileProps>();

// Reactive state with type inference
const isOnline = ref<boolean>(false);
const userBio = ref<string | null>(null);

// A computed property that returns a string
const statusMessage = computed((): string => {
  if (props.isAdmin) {
    return `Admin ${props.username} is ${isOnline.value ? 'Online' : 'Offline'}`;
  }
  return `${props.username} is ${isOnline.value ? 'Online' : 'Offline'}`;
});

// Function to toggle status
const toggleStatus = (): void => {
  isOnline.value = !isOnline.value;
};
</script>

<template>
  <div class="user-card">
    <h3>{{ statusMessage }}</h3>
    <button @click="toggleStatus">Toggle Status</button>
  </div>
</template>

Section 2: Asynchronous Data and API Handling

Typed API Responses

<script setup lang="ts">
// Define the shape of the expected API response
interface Article {
  id: number;
  title: string;
  body: string;
  tags: string[];
  publishedAt: string;
}

interface ApiResponse {
  data: Article[];
  total: number;
  page: number;
}

// Async function using Nuxt's useFetch
// We pass the ApiResponse interface as a generic to useFetch
const { data, pending, error, refresh } = await useFetch<ApiResponse>('https://api.example.com/articles', {
  query: { page: 1, limit: 10 },
  // Transform allows us to modify data before it hits the state
  transform: (response) => {
    return {
      ...response,
      data: response.data.map(article => ({
        ...article,
        title: article.title.toUpperCase()
      }))
    };
  }
});

// Function to handle error states
const handleRetry = async (): Promise<void> => {
  if (error.value) {
    console.warn('Retrying fetch due to error:', error.value.message);
    await refresh();
  }
};
</script>

<template>
  <div>
    <div v-if="pending">Loading articles...</div>
    <div v-else-if="error">
      <p>Error loading data.</p>
      <button @click="handleRetry">Retry</button>
    </div>
    <ul v-else>
      <li v-for="article in data?.data" :key="article.id">
        {{ article.title }}
      </li>
    </ul>
  </div>
</template>

Section 3: Advanced Techniques and DOM Manipulation

Safe DOM Interaction

<script setup lang="ts">
import { onMounted, ref } from 'vue';

// 1. Create a ref initialized as null
// 2. Type it as HTMLInputElement | null because it's not bound immediately
const searchInput = ref<HTMLInputElement | null>(null);

// Reactive search query
const query = ref('');

onMounted(() => {
  // TypeScript knows searchInput.value can be null, so we must check
  if (searchInput.value) {
    // Now TypeScript knows this is definitely an HTMLInputElement
    searchInput.value.focus();
    searchInput.value.style.border = '2px solid #00DC82'; // Nuxt Green
    console.log('Input focused and styled');
  }
});

const handleSearch = () => {
  if (!query.value) return;
  console.log(`Searching for: ${query.value}`);
  // Logic to trigger search API...
};
</script>

<template>
  <div class="search-container">
    <!-- The ref attribute matches the variable name -->
    <input 
      ref="searchInput"
      v-model="query"
      type="text" 
      placeholder="Search documentation..."
      @keydown.enter="handleSearch"
    />
  </div>
</template>

Section 4: The Broader Ecosystem and Best Practices

Tooling and Performance

Testing

Comparison with Other Frameworks

Best Practices for Typed Nuxt Projects

Conclusion