Vue.js Composition API in Nuxt

Nuxt.js is a framework based on Vue.js, designed to simplify Vue project development by providing solutions ranging from single-page applications to full-stack architectures. In Nuxt, the Composition API of Vue.js (such as the setup() function) has become a core tool; developers can build efficient web applications through modularization, componentization, and state management. This article delves into application scenarios, practical methods, and best practices for using the Vue.js Composition API in Nuxt.

Basics of Vue.js Composition API

The Vue.js Composition API is introduced via the setup() function, allowing developers to manage component logic in a more flexible manner. Its core features include:

• Reactive Data: Implement reactive data updates using reactive() and ref().
• Functional Programming: Expose component logic by returning functions, enhancing code reusability.
• Side Effect Handling: Manage the component lifecycle through hooks like onMounted() and onBeforeUnmount().

In Nuxt, these features are further encapsulated; developers can use them directly in page components, route components, or modules.

Application in Nuxt

Page Components

In Nuxt page components, the setup() function can expose data and logic directly:

<template>  
  <div>  
    <h1>{{ title }}</h1>  
    <p>{{ message }}</p>  
  </div>  
</template>  

<script setup>  
import { reactive } from 'vue'  

const title = reactive('Welcome to Nuxt!');  
const message = reactive('This is a Vue.js combination API example.');  
</script>  

With reactive(), page data updates in sync with component rendering without the need for manual binding.

Route Components

Nuxt route components (such as Layout.vue) can implement global logic by combining them with setup():

<template>  
  <div>  
    <h1>Common Layout</h1>  
    <p>This is a common section.</p>  
  </div>  
</template>  

<script setup>  
// Global state management  
const count = ref(0);  
</script>  

When switching routes, count updates automatically without the need for additional state management.

Modular Development

Nuxt supports encapsulating component logic into modules (such as modules/index.js) by exposing functionality through the setup() function:

// modules/index.js  
export default {  
  setup() {  
    const toggleDarkMode = () => {  
      // Implement dark mode switching logic  
    }  
    return { toggleDarkMode };  
  }  
};  

Called in a page component as follows:

<script setup>  
import { useDarkMode } from '@/modules/index.js';  
</script>  

Modular development enhances code maintainability and reusability.

Practical Cases

1. Interactive Forms

In form components, data binding and form validation are implemented via setup():

<template>  
  <form @submit.prevent="submitForm">  
    <input v-model="formData.name" />  
    <button type="submit">Submit</button>  
  </form>  
</template>  

<script setup>  
const formData = reactive({ name: '' });  
const submitForm = () => {  
  console.log(formData.name);  
};  
</script>  

Using v-model achieves two-way binding, while submitForm handles the form submission logic.

2. Dynamic Components

Dynamic component switching is implemented via setup():

<template>  
  <div>  
    <component :is="currentComponent" />  
  </div>  
</template>  

<script setup>  
const currentComponent = ref('Home');  
</script>  

currentComponent can dynamically switch components without manual rendering.

Conclusion

The application of the Vue.js Composition API in Nuxt enables developers to build modular, componentized, and state-managed web applications more efficiently. Through the setup() function, developers can directly manage data, logic, and lifecycle; combined with Nuxt's routing and module systems, this achieves flexible architectural design. In practical development, reasonably utilizing the Composition API significantly improves code maintainability and scalability.