dmarr
Sharing types across a custom devtool module and client
I am playing around with the devtools kit and wondering how I would create types that are part of the module but also shared to the client (app packaged within the devtools module). In the documentation regarding the custom rpc functions: https://devtools.nuxt.com/module/guide#custom-rpc-functions it gives an example of the types with
rpc-types.ts
as a filename. Later, they show these types being accessed from the sub app (client) directory. How would that work? Is there a way to bundle those types so they are auto-imported into the client app?9 replies
Debugging server locally with https
I am trying to debug some oauth stuff with my local dev server. The auth service I'm using requires the callback uri to be https, which is annoying. However, I have my dev server running over https using some self-signed certs. The trouble I'm running into is getting the debugger to attach to my local server. I would like to step through some of the server code, but from what I can tell something is amiss from my usual method to do this. I have tried several ways using vscode to no avail. I think the gotcha is that I have to start my server with sudo, since it requires port 443. Any help would be appreciated.
6 replies
How to test the side effect of a watcher function?
I have a component that looks something like this:
In my test, I'd like to assert that the change that happens in the e() function is done.
So far, I see the change that happens in the watch happen, and the side effect from running e(). However when I try to assert the textContent has changed due to the call, I am stuck.
edit: used flushPromises to pass assertion
6 replies
How would I mock a route with nuxt test-utils if I am not mounting a component?
I am trying to test a pinia store, and it relies on the useRoute composable. I am not mounting a component, and was getting undefined from the useRoute call that is made in the store I'm trying to test. Is there a workaround for that?
1 replies
nuxi typecheck returns errors from files in node_modules
A couple oddities with
nuxi typecheck
-- I find it reporting on errors that appear in my node_modules directory. Granted, its for a package that I am extending (extends
in config). But still, shouldn't it stay confined to the current application? I have tried setting the root to src
in the typecheck
npm script but it still reports on those errors.
The other thing is, those errors don't show up in my ide. I have the layer package added to the vscode ide and it doesn't report on any of the errors that nuxi typecheck does (that are contained in the node_modules dir).
Have people worked around this somehow? I imagine I could execute vue-tsc
manually6 replies
Is it possible to support top level await in route handlers?
I have a route handler (/server/routes/foo.ts) and was hoping to have a top level await outside the event handler. Is that possible? The compiler says that it's not supported since we're targeting ES2019. I also see the caveat in the docs about setting the
target
in the tsconfig.json file. So maybe I'm asking something that isn't doable...1 replies
Resolve a path relative to layer?
I'm trying to troubleshoot the pinia module when used from a layer, and I think it's not resolving the 'stores' directory relative to the layer. How would I resolve "stores" for example that the layer defines?
I can do this in the layer:
const resolvedPath = await resolvePath("pinia/dist/pinia.mjs");
and the proper path is returned. it is basically <apps_dir>/node_modules/<layer_dir>/node_modules/pinia/dist/pinia.mjs
I'm getting hung up how I'd find the dir:
<apps_dir>/node_modules/<layer_dir>/stores
I've tried several things.. if I create a resolver like:
createResolver(imports.meta.url)
within the layer/module, it gets resolved to the app dir using the layer. This may be due to the way I'm trying to develop but I don't know. I'm trying with published npm packages.25 replies
Layers and non-ESM dependencies
I am running into some issues with dependencies in my nuxt layer. Basically, in my parent project, I get some client errors like "mapbox-gl does not provide an export named 'default'". I don't see this issue when I'm running the layer in it's own playground. This appears to happen when using the built version of the layer in an external app.
Does anyone know a good way to find these issues and how I'd troubleshoot them?
3 replies
Using DataDog (dd-trace)
Has anyone had success using the dd-trace package with nuxt 3? I am trying to do some tracing, but I don't see anything happening when I
build
and then start the server. I have tried several methods to initialize the dd-trace package. Specifically, I would expect this to show the configuration:
This does show the trace I expect though:
I guess since the dd-trace module has to be the first thing run, the nuxi binary somehow prevents that.1 replies
Providing computed values from plugin
I am trying to provide a computed value from a plugin, and I'm not sure why it's not working. I have two plugins here:
https://stackblitz.com/edit/github-vcbsj4-pqa2gg?file=plugins%2F0.init.ts,app.config.ts,app.vue,plugins%2F1.other.ts
The 0.init is commented out, but works as expected when uncommented. It uses app config which is reactive.
The 1.other is the plugin I'm working on returns a computed. In the app, I don't see the value change.
Hoping this is something obvious.
22 replies
Managing Server State
I have some sensitive data I need to load before presenting a login page. In the vue page, I use
useNuxtData
to use data that was provided in a plugin. I wasn't sure how to keep the page "server only" if possible, since the provide
only happens if process.server
.7 replies
useLazyFetch initial load not pending
I have a question about showing a loading state. In a simple example, I am trying to use the
pending
state from useLazyFetch
on initial page load. Pending only appears to get set when I use the refresh
method. Why does useLazyFetch appear to block on initial server page load? I have tried using await and not await, they don't seem to matter.6 replies
How to cache server calls using useNuxtData?
I am wondering how I'd cache large server route data calls in my app. I have an initial question about useNuxtData though, in this example: https://stackblitz.com/edit/github-vcbsj4-pqa2gg?file=nuxt.config.ts,app.vue the page will load with data rendered only if I use ssr: true. With ssr: false, the page requires the fetch button to be pressed before loading the data. Once I figure that out, I will want to know how I'd cache large requests made in server routes.
1 replies
Linked ESM package not found
I am trying to import from a linked package that I've built with vite (in library mode).
When I try to run the dev script, I get:
Failed to load url /@fs/Users/david.marr/code/ui-components/packages/Utils/lib/index.mjs (resolved id: /Users/david.marr/code/ui-components/packages/Utils/lib/index.mjs) in /Users/david.marr/code/app/src/plugins/filters.js. Does the file exist?I don't have type: 'module' in either the app or the package i'm trying to import. I've linked the package and verified that it is in node_modules. Not sure what the issue is... If I run the
build
script, the issue doesn't appear. I also am able to import this package in a fresh nuxt 3 app, so maybe there is something with linking that is the issue?32 replies