Nuxt

Nuxt is an open source framework that makes web development intuitive and powerful.

Quickstart

To get started with Nuxt in a Turborepo quickly, use the with-vue-nuxt example:

pnpm dlx create-turbo@latest -e with-vue-nuxt

yarn dlx create-turbo@latest -e with-vue-nuxt

npx create-turbo@latest -e with-vue-nuxt

bunx create-turbo@latest -e with-vue-nuxt

Adding a Nuxt application to an existing repository

Use Nuxi, Nuxt's CLI, to set up a new Nuxt application in a package. From the root of your repository, run:

pnpm dlx nuxi@latest init apps/my-app

yarn dlx nuxi@latest init apps/my-app

npx nuxi@latest init apps/my-app

bunx nuxi@latest init apps/my-app

Integrating with your repository

To add Internal Packages to your new application, install them into the app with your package manager:

{
  "name": "my-app",
  "dependencies": {
+   "@repo/ui": "workspace:*"
  }
}

{
  "name": "my-app",
  "dependencies": {
+   "@repo/ui": "*"
  }
}

{
 "name": "my-app",
  "dependencies": {
+   "@repo/ui": "*"
  }
}

{
 "name": "my-app",
  "dependencies": {
+   "@repo/ui": "workspace:*"
  }
}

Make sure to run your package manager's install command. You also may need to update scripts in package.json to fit your use case in your repository.

Customizing tasks

By default, the new application will use the tasks defined in the root turbo.json. If you'd like to configure tasks differently for the new application, use Package Configurations.

Microfrontends

When using Nuxt with Turborepo's microfrontends, make sure to set the base property for child applications. This ensures the assets like images and CSS will be routed to the correct application.

import { defineConfig } from "vite";

export default defineConfig({
  base: "/admin",
});