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.

Nuxe wires up unplugin-auto-import and unplugin-vue-components as part of the framework’s Vite plugin stack. The result is that any component you drop into app/components/ becomes globally available in templates, and any composable you export from app/composables/ can be called in <script setup> blocks — with no import statement required in either case.

​
Component auto-imports

Every .vue file inside app/components/ is registered as a global component. The component name is derived from the filename (PascalCase). Nested directories act as a namespace prefix joined to the component name — this is controlled by the directoryAsNamespace: true option in unplugin-vue-components.
FileComponent name
app/components/hello.vue<Hello />
app/components/forms/input.vue<FormsInput />
Here is the playground’s hello.vue component being used in pages/index.vue — no import required:
app/pages/index.vue
<script setup lang="ts">
const now = ref(new Date())
const mounted = ref(false)

onMounted(() => {
  mounted.value = true
  setInterval(() => { now.value = new Date() }, 1000)
})
</script>

<template>
  <h1>Hello from pages/index.vue</h1>
  <p v-if="mounted">Current time: {{ now.toLocaleString() }}</p>
  <p v-else>Current time: --</p>
  <Hello name="nuxe" />
  <FormsInput label="Test" />
</template>
Both <Hello /> (from components/hello.vue) and <FormsInput /> (from components/forms/input.vue) are resolved automatically. The underlying component definitions: 
<script setup lang="ts">
defineProps<{ name?: string }>()
</script>

<template>
  <div>
    <strong>Hello from hello.vue!</strong>
    <span v-if="name"> - {{ name }}</span>
  </div>
</template>

​
Composable auto-imports

Any .ts or .js file you place in app/composables/ is scanned for named exports, and those exports become available everywhere in your app without an import. This mirrors how framework composables work: you just call them. Here is a minimal example of a use-now composable and how a page would consume it: 
import { ref, onMounted } from 'vue'

export function useNow() {
  const now = ref(new Date())

  onMounted(() => {
    setInterval(() => {
      now.value = new Date()
    }, 1000)
  })

  return { now }
}
Explicit import statements inside .ts composable files (outside of <script setup>) are still required for Vue APIs like ref and onMounted. Auto-imports apply to <script setup> blocks in .vue files and to the auto-import dirs — not to arbitrary .ts modules.

​
Framework composables

In addition to your own composables, the following symbols from @dvlkit/nuxe and related packages are auto-imported globally. You can use all of them in any <script setup> block without writing a single import line:

Vue core

All Vue 3 reactivity and lifecycle APIs (ref, computed, watch, onMounted, etc.)

Vue Router

useRoute, useRouter, onBeforeRouteLeave, onBeforeRouteUpdate

Data fetching

useAsyncData, useFetch, $fetch, createFetch

Page utilities

definePage, useHead, navigateTo, abortNavigation

Error handling

createError, showError, useError, clearError

Runtime

useRuntimeConfig, useState, useCookie, useRequestEvent, useRequestHeaders, useRequestURL, useRequestFetch

Plugins

defineNuxePlugin, defineNuxeRouteMiddleware

Components

ClientOnly component — renders only after hydration
For example, useHead is available in any page with no import:
app/pages/about.vue
<script setup lang="ts">
useHead({
  title: 'About — my-app',
  meta: [
    { name: 'description', content: 'About page' }
  ]
})
</script>

<template>
  <h1>About page</h1>
</template>

​
TypeScript support

Nuxe writes two declaration files into .nuxe/ so TypeScript understands every auto-imported symbol:
FileWhat it declares
.nuxe/auto-imports.d.tsAmbient type declarations for all auto-imported composables and utilities
.nuxe/components.d.tsGlobal component type declarations for every file in app/components/
These files are regenerated every time you run nuxe dev or nuxe build. You should add .nuxe/ to your tsconfig.json’s include array (Nuxe projects do this by default) to get full IntelliSense on auto-imported symbols.
Manual imports still work perfectly. If you prefer explicit imports — or need to import something from a package that is not auto-imported — just write the import statement as usual. Auto-imports never override an explicit import you have already written, and they never prevent you from importing the same symbol manually elsewhere.

Build docs developers (and LLMs) love

Get started for freeTalk to us