Fabian B.
Explore posts from serversVSCode Typechecking very slow: Takes up to 20s
Hi there! I noticed that in a larger Nuxt project (using layers with pnpm monorepo packages), the type checking became very slow. I notice this when I for example hover over a config object in
nuxt.config.ts. It takes up to 20s to load that type definition. For that time, VSCode displays loading. Same for dependencies in TS files. If I write a function and add a dependency, it takes up to 20s to get the error of missing dependency to go away.
It's hard to reproduce because it only appears on larger projects. I noticed that once the type definition is loaded, hovering it then is displaying it instantly.
Does anybody have the same issue? And any tips on how to debug intellisense performance, and if it's a Nuxt or Volar issue? Thanks 🙂2 replies
Reactive Route Search Query Composable
Does somebody have deeper experience with this?
I am trying to implement a composable to reactively use a route search query. Meaning that the value updates reactively whenever the route query parameter changes. And when setting a new value with
.value, it does a navigateTo() in the background.
However, there are issues with SSR, which makes it hard to implement this. This is how I got so far:
Works in most cases, but in the case where I do a navigateTo() in any component (or the user is navigating back & forth) where certain query parameters are getting removed (e.g. from ?foo=bar&xyz=abc to ?foo=bar), it's still not reactive (watching the searchQuery value reacts to changes in the query parameters, not not when it gets removed e.g. from the user navigating back & forth).3 replies
Getting the name of the currently active layout inside a component
I want to get the name of the current active layout in some component. So that I can do things like
if (layout === 'xxx') { ... }.
Since I am defining it in definePageMeta in the page's component, maybe there is a composable that I can use to retrieve the layout name inside a child component.1 replies
Cannot find module `...@nuxt/devtools`
Hi there. I just installed a fresh new project with
nuxi init. I wanted to npm i, but it returns the following error:
The problem is, I do not even have installed node 16. I only have node 18.16.1. So why does nuxt require a path with a node version I don't have installed?
I used node 16 before, but this was a long time ago. I tried to remove and reinstall nvm, node, pnpm from my system, but that didn't help.4 replies
Create local Nuxt modules inside a Nuxt project: Do I need a build step?
Hey there! Question to all that worked with modules, especially local ones:
I want to create some modules that will live only locally inside my nuxt project. I have done that by creating a
modules/my-module/module.ts and modules/my-module/runtime/plugin.ts like you would get from the module starter template. I am using the module in my main app like:
This works so far.
My question:
Now I want to install some dependencies and also inject some types from this module into my main app. Normally you would have "prepack": "nuxt-module-build", in your package.json which would generate some dist/...mjs files. Is this needed when my module is locally installed directly inside a nuxt app? Or can I get types and dependencies to work without that.7 replies
Tips for Common Pitfalls (`$fetch` vs `useFetch`, `public` vs `assets`)
Just a note for all, since these questions comes in here regularly.
$fetch vs useFetch
From the docs:
So theuseFetch,useLazyFetch,useAsyncDataanduseLazyAsyncDataonly work during setup or Lifecycle Hooks https://nuxt.com/docs/getting-started/data-fetching#usefetch
use... composables only work inside your vue templates. So whenever you have an issue on this, try to use $fetch , and if it's not available
import { $fetch } from 'ofetch'
(this module is built into nuxt)
public vs assets directory
Docs: https://nuxt.com/docs/getting-started/assets
You mainly want to use the public directory for your static files like fonts, images, videos, etc. They are being served at your project root and will not be modified by vite/webpack.
https://nuxt.com/docs/guide/directory-structure/public
The assets is only for files that will be processed by vite/webpack, and therefore also mostly need vite file handlers installed. This could be css files, svgs with nuxt-svgo or other files that are being processed on build.
https://nuxt.com/docs/getting-started/assets#assets-directory
Example:
- you have a few woff2 font files, that can be served as-is. You would put them into public
- you have some css files you want to include. You would put them into assets and include them with the nuxt.config css option.
- you have some 5mb 4000x3000 jpegs: you can either use nuxt/image (where they can stay in public because they are being minified at runtime, not a build time), or you can use a custom vite plugin which would require them to be in assets .10 replies
Vercel Analytics with Nuxt 3
Has anyone successfully tried to activate Vercel Analitics on a deployed Nuxt 3 project? Everytime I do, the build fails. It adds the
@nuxtjs/web-vitals package automatically and then does this:
So I installed this module manually but having the exact same issue.4 replies
Add custom files to watch for restarting nuxt (just like `nuxt.config.ts`)
Hi, in my
nuxt.config.ts, I am importing some typescript files. When changing the nuxt.config.ts file, or e.g. the .env file of a project, nuxt gets restarted. I want to archive the same, so that when I edit one of the files imported, nuxt should also restart:
so in this case if either generateSitemap.ts or cookieConfig is edited, I want to restart the whole nuxt server.6 replies
@vue/server-renderer or vue/server-renderer not found on build
I want to use the
@vue/server-renderer package to render a vue template on a server endpoint and send the rendered html code via an email.
Normally, this is already included in vue, so just
works on dev, but not on build. It tells me Cannot find module '/Users/fabian/Desktop/code/nuxt-wordpress-starter/.output/server/node_modules/vue/server-renderer/index.js'
I tried manually installing the package, so npm i @vue/server-renderer , and importing it like this:
but same behaviour, works on dev, not on build.
Does somebody know how this could be possible? It seems that nuxt is somehow removing this package in build, even though I am importing it.3 replies
Render a vue template completely on a server route (and get the string from it)
Hi there. I am using a backend api route to send an email. I have some JS data that I want to render as a HTML template string, which I can send as the email body.
I was thinking to use vue as a templating engine, since the whole nuxt ecosystem is vue.
So I tried:
But this gives me a error:
Do you have any idea on how to archive this?
6 replies
Nuxt/kit: when creating a module, how can I inject a script into the body
Hi there. I am currently creating a nuxt module. One of the things I need to do is, I have a minified .js file I want to inject into the body. But only on client side. I tried
This does include the script directly, so also in SSR. When adding something like
if (typeof window !== 'undefined') to only inject it on the client-side, it never gets injected since the src/module.ts seems to only run once on start.
I am sure that addTemplate is not the right method.
Do you know any method to add a file into the public folder?21 replies
