1. nuxt
Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.
nuxt
Package: nuxt
Created by: nuxt
Last modified: Thu, 04 Apr 2024 16:10:14 GMT
Version: 3.11.2
License: MIT
Downloads: 2,819,889
Repository: https://github.com/nuxt/nuxt

Install

npm install nuxt
yarn add nuxt

Nuxt banner

Nuxt

Version Downloads License Website Discord

Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js.

It provides a number of features that make it easy to build fast, SEO-friendly, and scalable web applications, including:

  • Server-side rendering, Static Site Generation, Hybrid Rendering and Edge-Side Rendering
  • Automatic routing with code-splitting and pre-fetching
  • Data fetching and state management
  • SEO Optimization and Meta tags definition
  • Auto imports of components, composables and utils
  • TypeScript with zero configuration
  • Go fullstack with our server/ directory
  • Extensible with 200+ modules
  • Deployment to a variety of hosting platforms
  • ...and much more πŸš€

Table of Contents


πŸš€ Getting Started

Use the following command to create a new starter project. This will create a starter project with all the necessary files and dependencies:

 npx nuxi@latest init <my-project>

[!TIP]
Discover also nuxt.new: Open a Nuxt starter on CodeSandbox, StackBlitz or locally to get up and running in a few seconds.

πŸ’» Vue Development

Simple, intuitive and powerful, Nuxt lets you write Vue components in a way that makes sense. Every repetitive task is automated, so you can focus on writing your full-stack Vue application with confidence.

Example of an app.vue:

<script setup lang="ts">
useSeoMeta({
  title: 'Meet Nuxt',
  description: 'The Intuitive Vue Framework.'
})
</script>

<template>
  <div id="app">
    <AppHeader />
    <NuxtPage />
    <AppFooter />
  </div>
</template>

<style scoped>
#app {
  background-color: #020420;
  color: #00DC82;
}
</style>

πŸ“– Documentation

We highly recommend you take a look at the Nuxt documentation to level up. It’s a great resource for learning more about the framework. It covers everything from getting started to advanced topics.

🧩 Modules

Discover our list of modules to supercharge your Nuxt project, created by the Nuxt team and community.

❀️ Contribute

We invite you to contribute and help improve Nuxt πŸ’š

Here are a few ways you can get involved:

  • Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
  • Suggestions: Have ideas to enhance Nuxt? We'd love to hear them! Check out the contribution guide to share your suggestions.
  • Questions: If you have questions or need assistance, the getting help guide provides resources to help you out.

🏠 Local Development

Follow the docs to Set Up Your Local Development Environment to contribute to the framework and documentation.

⛰️ Nuxt 2

You can find the code for Nuxt 2 on the 2.x branch and the documentation at v2.nuxt.com.

πŸ”— Follow us

Discord  Twitter  GitHub

βš–οΈ License

MIT

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin