davestewart Posts - Answer Overflow

davestewart

Explore posts from servers

•Created by davestewart on 6/12/2024 in #❓・help

How come there are so few events in Nuxt UI?

I was hoping for a closed event for the USlideover component but I didn't see any. Then I looked at other components to see if there was any event / emit reference, and there didn't seem to be any at all events or emits listed for most of them. Am I missing something?

3 replies

NNuxt

•Created by davestewart on 4/30/2024 in #❓・help

Cannot ever seem to init a new Nuxt project without squigglies everywhere

1 replies

NNuxt

•Created by davestewart on 4/12/2024 in #❓・help

Nuxt Image in Nuxt Content Assets

Hello, Nuxt Content Assets author here. It seems that Nuxt Image has stopped working in Nuxt Content Assets. https://github.com/davestewart/nuxt-content-assets/issues/64 The previous version of Nuxt Content Asset (NCA) was actually using the Nuxt Image 1.0.0-rc, and Nuxt has also moved on a lot since last looking at it. Additionally, I think there were probably some shortcomings; my previous advice for folks was to change the config dir but that also prevented images in public from working in regular use. So I'm just attempting to get up to speed with the new module and find a way to make it load images from both .nuxt/content-assets/public and public. I've tinkering with a few test repos right now to properly understand NI, and I'm wondering if the right approach might be to create a custom provider for Nuxt Content Assets which would look in a different place:

// components/content/ProseImg.vue
<template>
  <nuxt-img provider="content" v-bind="$attrs" />
</template>

// components/content/ProseImg.vue
<template>
  <nuxt-img provider="content" v-bind="$attrs" />
</template>

I don't even know if this is possible, so this post is really just me trying to validate potential solutions if it can save me some time. I've had a play with useImage() but it seems to work only with the preconfigured folder (i.e. public):

// components/content/ProseImg.ts
import { h } from 'vue'
import { useImage } from '#imports'

export default function render () {
  const img = useImage()
  const src = img('splash.jpg', { width: 300, quality: 50 })
  return h('img', { src })
}

// components/content/ProseImg.ts
import { h } from 'vue'
import { useImage } from '#imports'

export default function render () {
  const img = useImage()
  const src = img('splash.jpg', { width: 300, quality: 50 })
  return h('img', { src })
}

Any direction welcome.

5 replies

NNuxt

•Created by davestewart on 2/18/2024 in #❓・help

generate vs prerender

I have a site which is mainly static, but has a couple of server/api endpoints. From what I understand / have experienced in development, I can't use nuxi generate as I need a live Nitro instance to manage API requests. As the site is static, but I need Nitro, should I use route rules to prerender everything?

  routeRules: {
    '**': { prerender: true },
  },

  routeRules: {
    '**': { prerender: true },
  },

I just want to get clear on a) the best pipeline to get the best performance and b) to have a better understanding of what Nuxt does to give users a site (as it's not like PHP where you can see the phsical files from the outset). From what I can see in the .output folder: - nuxi generate / serve creates / serves .html files and payloads from public/path/to/file - nuxi build / preview creates / serves equivalent mjs files under server/chunks etc So I assume that "prerendering" in the build case is not physical html files but mjs files which Nitro / Vue can more efficiently present as HTML? Thanks

11 replies

NNuxt

•Created by davestewart on 2/15/2024 in #❓・help

🐛 Nuxt muddling elements in rendered output #bug

20 replies

NNuxt

•Created by davestewart on 6/9/2023 in #❓・help

Can someone explain the difference / use cases between Nuxt server folder vs Netlify functions ?

Hi, I want to set up an API on my Nuxt-generated site but I'm unsure how to get started. I know that the Nuxt server folder works with $fetch() but I need to set up an API that can be called externally. This API will likely be a middleman between the hosted domain and another API. I've not worked with Nuxt's API or Netlify functions yet. Is there a benefit on going with one vs the other? Thanks, Dave

1 replies

NNuxt

•Created by davestewart on 3/22/2023 in #❓・help

How to get configured paths in a nitro plugin?

Hey. I need to copy some files around, so need to get the location of modules, public, etc. How do I do this in a nitro plugin?

export default defineNitroPlugin((nitroApp: NitroApp) => {
  const public = ...
  const modules = ...
})

export default defineNitroPlugin((nitroApp: NitroApp) => {
  const public = ...
  const modules = ...
})

Thanks

2 replies

NNuxt

•Created by davestewart on 3/21/2023 in #❓・help

Generate fails with ERROR [vite]: Rollup failed to resolve import "/res/img/photos/..."

My app is running just fine in dev mode, but when I build, it fails with this error:

ERROR  [vite]:
Rollup failed to resolve import "/res/img/photos/photo-27.jpg" from "/Volumes/Data/.../site/pages/blog/index.vue".

This is most likely unintended because it can break your application at runtime.

If you do want to externalize this module explicitly add it to `build.rollupOptions.external`

ERROR  [vite]:
Rollup failed to resolve import "/res/img/photos/photo-27.jpg" from "/Volumes/Data/.../site/pages/blog/index.vue".

This is most likely unintended because it can break your application at runtime.

If you do want to externalize this module explicitly add it to `build.rollupOptions.external`

The images are all stored in the public folder, and referenced like this:

<img src="/res/img/photos/photo-27.jpg">

<img src="/res/img/photos/photo-27.jpg">

Am I missing something?

2 replies

NNuxt

•Created by davestewart on 3/20/2023 in #❓・help

Additional watch folders

In Nuxt 2 you could add a watch property to the config file, but I can't see that in Nuxt 3. How do you watch additional folders in Nuxt 3?

4 replies

NNuxt

•Created by davestewart on 3/17/2023 in #❓・help

Unable to develop an npm linked module (error: "fails to load url")

Hello. I've just set up a starter module repo using the starter template code and have NPM linked it from a Nuxt project. However, when I configure Nuxt to see the module, and start the server, I get the following error:

ERROR  Failed to load url /@fs/Volumes/Data/Work/Projects/nuxt-landkit/dist/runtime/plugin.mjs 
(resolved id: /Volumes/Data/Work/Projects/nuxt-landkit/dist/runtime/plugin.mjs) 
in virtual:nuxt:/Volumes/Data/Work/Projects/controlspace-site/.nuxt/plugins/client.mjs. 

Does the file exist?

ERROR  Failed to load url /@fs/Volumes/Data/Work/Projects/nuxt-landkit/dist/runtime/plugin.mjs 
(resolved id: /Volumes/Data/Work/Projects/nuxt-landkit/dist/runtime/plugin.mjs) 
in virtual:nuxt:/Volumes/Data/Work/Projects/controlspace-site/.nuxt/plugins/client.mjs. 

Does the file exist?

I have run the prepare and build scripts in the module repo, and I can see the files exist. However, if I copy/paste the code to my app's modules folder, it works first time. Is it that Nuxt / Nitro doesn't see them, or is there something else at play?

10 replies

Gaming

Programming