Nuxt

N

Nuxt

Nuxt Community Chat Server

Join

Customize Routing Rule for Main domain and Subdomain(wildcard)

I have created a file app/router.options.ts for the subdomain ``` import type { RouterConfig } from "@nuxt/schema"; import { useRuntimeConfig } from "#app";...

Import file as raw string on a config file (UnoCSS config in this case)

I'm trying to import a css file as a string on a configuration file, in this case is for a feature of UnoCSS named "preflights" which lets you set up css for themes from strings, I'm using import globalCSS from './app/styles/theme-base.css?raw' within the config but I'm getting Cannot restart nuxt: Unknown file extension ".css" for <full file path> any idea on how to make the import work? I'm inlining the css instead of using the file as a workaround. Nuxt 4 compat. edit: fixed it by using normal fs from Node, looks like the module config doesnt go through vite...

Disable Extract CSS

How can I disable extract css?

nuxt ui pro content navigation not showing up

```<script setup lang="ts"> import type { ContentNavigationItem } from '@nuxt/content' const route = useRoute() ...

Nuxt content module: [error] Could not locate the bindings file. better_sqlite3.node

Hi I'm using pnpm package manager, I installed the nuxt content module however I run into this issue building locally and deploying. As a workaround locally I do
pnpm approve-builds
pnpm approve-builds
but I have the error on deployment too. So should i modify my deploy/build command to include this too or is there a proper workaround that's more recommended?

Using layers and (sub)domains.

Is it possible to use layers for subdomains? Like App.product.comb-> layer one Test.product.com -> layer two...

NuxtUI Pro - Github invite link expired

Hey, I missed the email invite to the GitHub. It has since expired. When I try to readd my account, it says the license ID has already been claimed. Anyone know who I can get in touch with to get another invite?

can you explain nuxt content with nuxt ui pro

I'm used to making a seperate page for a privacy policy, styling it etc and at most making css classes to reuse across reused sections for the terms of service page etc. can you explain nuxt content in addition to nuxt ui pro for a better way to go about this?

Memory overflow error when trying to load iconify icons dynamically

Hey all i am trying to add a nuxt site to my blog monorepo however a utility function that i wrote to extract iconify icons is causing the SSG build to overflow. The same function works well grabbing icons for astro, sveltekit, and nextjs however i am having issues with nuxt. I have done some research and think it might have something to do with how nuxt crawls and prepares the ssg bundle however i am not able to find a solution that allows me to use this function. If anyone has any insights or directions I should go down I am more than happy to explore. Appreciate any asistance...
No description

nuxt ui tailwind @apply in style tag for custom classes?

Hi, I'm making my privacy policy page with nuxt ui and tailwindcssv4, I have a lot of reused sections here so I made my own css classes like "policy-content-section" I now want to apply tailwind classes to these custom classes in the style section is this the right approach? as it seems none of these tailwind classes are being resolved and im getting errors. ``` <style scoped> .page-main-title, .section-title { @apply uppercase text-success dark:text-white; @apply border-b border-cool-300 dark:border-cool-700;...

How To: Downgrade 3.17.2 to 3.17.1

Hello everyone, I’m a complete beginner in development and I’m running into a MIME-type issue with @nuxt/fonts on NuxtJS v3.17.2. Can anyone share the proper way to downgrade NuxtJS from 3.17.2 to 3.17.1 without affecting my existing project? ...

Development mode component styles generate <style> instead of <link rel="stylesheet">

Is it possible to configure Nuxt in development mode to generate <style> tags for component CSS instead of a <link> ? I see this behavior in the production build, however, the development build always generates <link> tags for global CSS files and SFC styles.
<link rel="stylesheet" href="/_nuxt/assets/css/main.css" crossorigin>
<link rel="stylesheet" href="/_nuxt/pages/my/page/my-component.vue?vue&type=style&index=0&lang.css" crossorigin>
<link rel="stylesheet" href="/_nuxt/assets/css/main.css" crossorigin>
<link rel="stylesheet" href="/_nuxt/pages/my/page/my-component.vue?vue&type=style&index=0&lang.css" crossorigin>
...

navigateTo inside useAsyncData

I have this request in my SPA component: ```js const { data: product } = await useAsyncData('product-id', async () => { try { const response = await getProductById(1)...

nuxt ui toaster location won't change

```export default defineAppConfig({ toaster: { position: 'bottom-left', expand: true, duration: 5000,...

Render multiple component-previews as "islands" within a non-nuxt app

I want to render multiple "islands" of nuxt-components in a non-nuxt page, for preview purposes. For that I want to keep using the nuxt app, such that its components are used and component auto-loading works as usual. Thus, I want to re-use the nuxt bundlle and initialize the nuxt app manually on the client-side. I figured the regular entry file auto-initializes nuxt and mounts it to the root element #__nuxt. That's not suiting in my case, since I need multiple instances of components, .e.g. rendered via some custom h() call. Any ideas on how to do prevent nuxt to auto-mount immediately after loading?...

I want change background color NavigationMenu

I want to change the background color of Navigationmenu, but don't know how to do it. Help me, thanks
No description

"500 OK" when using routeRules to external backend

``` Error fetching author data: FetchError: [GET] "/api/mc-services/litematica/profile/Molforte?lang=ru": 500 OK at async $fetchRaw2 (file:///www/website/node/server/chunks/nitro/nitro.mjs:3921:14) at async $fetch2 (file:///www/website/node/server/chunks/nitro/nitro.mjs:3926:15) at async setup (file:///www/website/node/server/chunks/build/index-D8Vo9RTZ.mjs:241:22) {...

How can I load a 3rd party script widget?

The documentation I'm following says that I need to add the following code: ``` <form> <script...

$fetch dns that resolves to ipv6

Got this composable that has my expressjs backend on the baseURL ```ts export const useApi = () => { const config = useRuntimeConfig() console.log(config.public.apiBase)...

Watching files outside app/ directory

Hi! I tried configuring nuxt & vite to correctly hot reload etc. for my custom directory in root (my-content/) how to configure it properly? I spend a lot of time to configure it, but I cannot do it