nuxt mdc adding margin to top how to remove it?
"<MDC v-if="hasImportantNotices" :value="noticeContent" class="border-4 border-red-700" />" I'm rendering MDC content like this '"::callout{icon="i-lucide-triangle-alert" color="warning" to="#"}
This is a
callout with full markdown support.
::" that is the content it's rendering. but it's for some reason adding margin to the top which throws off my page. how do i ensure it doesn't do this? I tried to add class="!m-0" but it didn/t work...Dynamic route change without refreshing the page
In Nuxt, I have a dynamic route page like /[category].vue. How can I prevent a full page reload when navigating from one category (e.g., /iphones) to another (e.g., /tablets)?
Using layouts for authenticated pages?
Hey, for the nuxt experts, are layouts a good way to handle authenticated pages? Aka redirect to login page if not authenticated in certain pages.
I know that in some frameworks, using layouts are not the best idea, for instance, in svelte, there is this weird issue that if you use layouts, it only checks for authentication the first time you enter a page using the layout, so for instance, if you enter page A, then go to page B and sign out, you can go back to page A and you will still be authenticated (kinda) and be able to do actions while not being authenticated......
[useAsyncData] handler must be a function.
I am trying to write an api utility function that wraps useAsyncData. I don't know if that idea is fraught with peril to begin with, but I am running up against an issue since this function is running in a utility within a setup store in pinia.
The error I get running the following code:
```
const { data } = await nuxtApp.runWithContext(() => {...
I'm getting a weird error with no line numbers or trace when starting dev server
error: unknown command '_dev'
How can I get more debug/trace information about where this is coming from?...PWA In NUXT
I need a quick suggestion about implementing PWA in NUXT. Has anyone implement one before and what modules and plugins are available for it
Nuxt Auth Utils and external bearer tokens
We are currently in the process of moving an internal site from Vue 2 to Vue 3 and are likely using Nuxt as the final destination.
I'm currently looking at how the Nuxt application will communicate with the existing API server (Hapi.js), and more importantly how that server will authenticate requests once users have been authenticated on the frontend
I am at the point where
nuxt-auth-utils is retrieving an authenticated user and displaying the { user } details on the front-end using useUserSession...Should a starter project go in a folder in a repo or the root?
Hi! I've been reading about vue and nuxt recently would like to give it a swing. But I got the most silliest and basic of questions.
I created a new github repo, nuxt-test-app and put a devcontainer in there. I opened the repo in a codespace and created the starter app using the vscode nuxtr extension. Now my repo structure looks like:
nuxt-test-app/.git/{git stuff}...
Web scrapping for youtube embedded video URLS with nitro.
This isn't a nuxt question, but seems puppetteer (webscraper) doesn't work properly inside nitro. I'd like to know how I can use it for getting the first youtube video from a query, and embedding the youtube link inside my page.
Nuxt Content with Shiki syntax highlighting not working
I can't seem to get the the shiki syntax highlighting to work as expected. I would expect the code block to be rendered with the ability to scroll to the side if the code extends the width of the container.
Also, the themes aren't getting applied like I would expect. The file name doesn't show up. It seems that there is something wrong when styles are being generated in the
<ContentRenderer /> component. You can see in my screenshot here that nothing is being generated in the style attribute. My guess is that there is an issue with the nuxt/tailwindcss module in that it is defaulting to v7 which is still in beta. Has anyone else run into this?
This is a fresh nuxt content build that I just spun up yesterday....Running Nitro Tasks?
Hi,
I am looking for a way to seed my DB locally (NuxtHub SQLite, with Drizzle). I read about (experimental) Nitro Tasks (https://nitro.build/guide/tasks), which sound like a good fit.
Unfortunately, I didn't find a way to trigger Nitro tasks. Nitro tasks are not runnable via
nuxi cli, just via nitro cli: npx nitro task run db:seed:test.
...Conditional rendering inside v-for not working properly?
I have the following template code:
```html
<template>
<div class="grid md:grid-cols-3 gap-2">
<div v-for="stat in stats" :key="stat.label" class="bg-white p-6 rounded-md">...
Supabase Authentication
i'm using nuxt3 with supabase, and when i'm logged in authentication token persist in cookies all time, how to configure this ?
net::ERR_ADDRESS_UNREACHABLE
I try to access a local API on my laptop (Docker container run by OrbStack). However, when fetching the URL, Nuxt returns
net::ERR_ADDRESS_UNREACHABLE in the console. I don’t understand what I am missing knowing that it does work with other apps like Hoppscotch.Tailwind just does not wanna go with darkMode = "class"
ColorMode package installed and configures
Tailwindcss config file exposed
darkMode = "class" set
But at the end tailwind just does not care and look at systems preference no matte how much i change html's class with "dark" or "dark-mode" or "light" or "light-mode"...
Nuxt layers: Cant import scss files in a layer
```bash
ERROR Pre-transform error: [sass] Can't find stylesheet to import.
╷
5 │ @use 'assets/scss/modules/normalize';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^...
Cannot find name 'useRuntimeConfig'.
Nuxt 3.16.1 + Bun + Docker: Server-side auto-imports not working
useRuntimeConfig() shows "Cannot find name" in server API routes despite:
✅ .nuxt/types/nitro-imports.d.ts exists with correct declarations
✅ tsconfig.json includes the nitro-imports file ...
Force refresh after new deployment? [Vercel]
I'd like to force reload the Nuxt app (in Universal mode) of every user after I've deployed a new version. As far as I understand there is an auto-reload if a chunk file is 404, but that's not always the case. What would be a good way to implement this? A manual trigger would be fine.
Extending public runtime config type
I have a ...
featureFlags property on my runtimeConfig.public config. However, when I try to do something like:
const { featureFlags: runtimeFeatureFlags = '' } = useRuntimeConfig().public;
const featureFlags = ref(runtimeFeatureFlags.split(','));
const { featureFlags: runtimeFeatureFlags = '' } = useRuntimeConfig().public;
const featureFlags = ref(runtimeFeatureFlags.split(','));
How do you get coverage set up with Playwright?
I've tried using the vitest test runner with istanbul coverage but it doesn't report coverage for playwright tests. I've also tried using the playwright test runner but can't seem to get coverage working with that at all.
Any help would be greatly appreciated. 😃...