Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/dvlkit/nuxe/llms.txt

Use this file to discover all available pages before exploring further.

The fastest way to start a Nuxe project is with the create-nuxe scaffolding CLI. It asks a few questions, writes the project files, and leaves you with a working SSR app ready to run. The steps below walk through the entire flow from zero to a running dev server.
1

Scaffold a new project

Run create-nuxe and pass your project name as the first argument, or omit it to be prompted interactively.
npm create nuxe@latest my-app
The CLI walks you through four prompts:
PromptDefaultDescription
Project namemy-nuxe-appUsed as the directory name and package.json name field. Only letters, numbers, dashes, and underscores are allowed.
Dev port3000The port the development server listens on. Written into nuxe.config.ts as server.port.
Include demo pagesyesScaffolds app/pages/, app/components/, and app/composables/ with example files. Choosing no leaves a bare app/app.vue with only <RouterView />.
Add Tailwind CSS v4yesInstalls tailwindcss and @tailwindcss/vite, adds the Vite plugin to nuxe.config.ts, and creates app/assets/css/main.css with @import "tailwindcss".
You can skip the interactive prompts entirely by providing the project name as a positional argument: npm create nuxe@latest my-app. The remaining options still prompt unless you add automation on top.
2

Install dependencies

Move into the newly created directory and install.
cd my-app
npm install
create-nuxe resolves and pins the latest published versions of @dvlkit/nuxe, vue, vue-router, and typescript at scaffold time, so your package.json starts with concrete version numbers rather than latest tags.
3

Start the development server

npm run dev
This runs nuxe dev, which starts a Vite-powered SSR dev server with hot module replacement. You will see the Nuxe banner in your terminal followed by the local URL.
4

Open your app

Navigate to http://localhost:3000 (or whichever port you chose during scaffolding). If you included the demo pages, you will see the home page rendered from app/pages/index.vue.
The port can be changed at any time by editing server.port in nuxe.config.ts, or by setting the PORT environment variable at runtime.

​
Generated nuxe.config.ts

create-nuxe writes a nuxe.config.ts at the project root based on your answers. With Tailwind CSS enabled it looks like this (taken directly from the playground):
nuxe.config.ts
import { defineConfig } from '@dvlkit/nuxe/config'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  runtimeConfig: {
    apiSecret: 'default-secret',
    public: {
      apiBase: '/api',
    },
  },
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
})
Without Tailwind, and with a custom port, the output is minimal:
nuxe.config.ts
import { defineConfig } from '@dvlkit/nuxe'

export default defineConfig({
  server: {
    port: 4000,
  },
})
The full set of top-level config keys is: server (port, apiPrefix), vite (any Vite UserConfig), runtimeConfig, and baseUrl. Every key is optional — an empty defineConfig({}) is valid.

​
A sample page

Here is a minimal page that uses useHead for per-page metadata and definePage to assign a layout:
app/pages/about.vue
<script setup lang="ts">
import { useHead } from '@dvlkit/nuxe'

useHead({
  title: 'About — my-app',
  meta: [
    { name: 'description', content: 'Learn more about my-app' }
  ]
})
</script>

<template>
  <h1>About page</h1>
</template>
To opt into a named layout, add definePage (auto-imported — no import statement needed):
app/pages/admin.vue
<script setup lang="ts">
definePage({
  meta: {
    layout: 'admin'
  }
})
</script>

<template>
  <h1>Admin</h1>
</template>
meta.layout is case-insensitive and resolves to the matching file in app/layouts/. Pages without meta.layout automatically fall back to layouts/default.vue.

​
Build and run for production

When you are ready to deploy, build the app and then start the production server: 
npm run build
npm run start
nuxe build produces two output directories: .output/public/ (static assets and client bundles) and .output/server/ (the SSR handler). nuxe start serves both from the same Node.js process.
Never commit the .nuxe/ or .output/ directories to version control — they are generated artifacts and are already included in the scaffolded .gitignore.

Build docs developers (and LLMs) love

Get started for freeTalk to us