Skip to content

[Feat] Expose composables on '@nuxt/ui' #5370

@ShayanTheNerd

Description

@ShayanTheNerd

Package

v4.x

Description

Except for the well-known Vue/Nuxt/NuxtUI utilities, composables, and components, I prefer explicit imports so I can quickly figure out where each util/composable/component comes from, especially when trying to distinguish between local and third-party code. That's why I configure Nuxt auto-imports like this:
nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config';

export default defineNuxtConfig({
  components: false,
  imports: {
    scan: false,
  },
});

As a result, I need to explicitly import a composable such as useToast, but it's not exposed on '@nuxt/ui'. So I have to create a local utility, import useToast directly from its JavaScript file in node_modules, and export it from the util:
app/utils/useToast.ts

export { useToast } from '../../node_modules/@nuxt/ui/dist/runtime/composables/useToast.js';

app/components/MyComponent.vue

<script setup lang="ts">
import { useToast } from '~/utils/useToast.ts';
</script>

<template>
  <!-- Component's template -->
</template>

Please expose composables such as useToast, useLocale, useColorMode, and defineShortcuts on '@nuxt/ui'.

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestp2-mediumNotable issue or useful enhancementv4#4488

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions