rxsto Posts - Answer Overflow

rxsto

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

Is it possible to get pre-defined data from `components:extend` hook?

As of now I'm able to get a certain list of components that I have defined in ~/components/dashboard/sections, and would like to create a runtime list of metadata when building my nuxt app. Is there any way to define custom metadata on components that can be read in this build-time hook? The code I have so far:

hooks: {
    'components:extend': (components) => {
      console.log('build hook', components.filter(c => c.shortPath.startsWith('components/dashboard/section')).map(c => c.pascalName))
    }
  },

hooks: {
    'components:extend': (components) => {
      console.log('build hook', components.filter(c => c.shortPath.startsWith('components/dashboard/section')).map(c => c.pascalName))
    }
  },

Thanks!

1 replies

NNuxt

•Created by rxsto on 6/4/2024 in #❓・help

How should I use components as values in objects?

I want to simplify and automate the implementation process of a dashboard I'm helping to build, and I am struggling to use imported components as values on objects that are defined by typescript interfaces. Somewhere in the center of the codebase there's a dynamic <component> with the accompanying :is="someValue" attribute. This component tag with its attribute needs to resolve a reactive dynamically passed component which would be part of an object describing the section of the dashboard. This object is defined by a typescript interface as follows:

interface Section {
  name: string
  ...
  component: ???
}

interface Section {
  name: string
  ...
  component: ???
}

When constructing such a Section object I want to pass along the actual imported component that will then later be rendered via the <component :is="someReactiveValue"> tag. I would collect the components in an index.ts like this:

export { default as DashboardOverviewPage } from './DashboardOverviewPage.vue'
...

export { default as DashboardOverviewPage } from './DashboardOverviewPage.vue'
...

And then later reuse them like this:

import { DashboardOverviewPage } from "~/components/dashboard/sections/"

import { DashboardOverviewPage } from "~/components/dashboard/sections/"

How would I go about doing this properly? I've tried typing the component property of the interface with the DefineComponent type, which didn't really work, since it gave me overload errors, as well as the need to actually export the interface since the file turned into a module. Also: a bonus would be if I could ditch the whole interface thing by aggregating the components I need to render programmatically by collecting the from a specific directory. I haven't yet found a way for doing that properly, but maybe there's is some wizardry built into nuxt that could allow me to collect components as an array from a specific directory. Would appreciate any help! (feel free to ping) :pepoLove:

9 replies

NNuxt

•Created by rxsto on 4/17/2024 in #❓・help

Disable/purge nuxt devtools from project

I am trying to fully disable or completely purge the nuxt devtools from my project, as it is creating several issues when running the app in an iframe. Using nuxi devtools disable, which results in the following

devtools: {
  enabled: false
},

devtools: {
  enabled: false
},

is seemingly not enough to properly disable all devtools-related packages. I am seeing following error in my console:

[12:46:15 PM]  ERROR  Internal server error: Failed to resolve import "virtual:vue-inspector-options" from "node_modules/.pnpm/vite-plugin-vue-inspector@4.0.2_vite@5.2.9/node_modules/vite-plugin-vue-inspector/src/Overlay.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/oskar/Storage/Projects/.../node_modules/.pnpm/vite-plugin-vue-inspector@4.0.2_vite@5.2.9/node_modules/vite-plugin-vue-inspector/src/Overlay.vue:2:31
  1  |  
  2  |  import inspectorOptions from 'virtual:vue-inspector-options'
     |                                ^
  3  |  const isClient = typeof window !== 'undefined'
  4  |  const importMetaUrl = isClient ? new URL(import.meta.url) : {}

[12:46:15 PM]  ERROR  Internal server error: Failed to resolve import "virtual:vue-inspector-options" from "node_modules/.pnpm/vite-plugin-vue-inspector@4.0.2_vite@5.2.9/node_modules/vite-plugin-vue-inspector/src/Overlay.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/oskar/Storage/Projects/.../node_modules/.pnpm/vite-plugin-vue-inspector@4.0.2_vite@5.2.9/node_modules/vite-plugin-vue-inspector/src/Overlay.vue:2:31
  1  |  
  2  |  import inspectorOptions from 'virtual:vue-inspector-options'
     |                                ^
  3  |  const isClient = typeof window !== 'undefined'
  4  |  const importMetaUrl = isClient ? new URL(import.meta.url) : {}

I would expect any devtools-related packages (such as vite-plugin-vue-inspector) to be disabled and not accessed when running the app in development. Am I doing something wrong, or am I missing something specific? Thanks

1 replies

NNuxt

•Created by rxsto on 4/10/2024 in #❓・help

Dynamic server routes not working

11 replies

NNuxt

•Created by rxsto on 1/28/2023 in #❓・help

Why are custom data attributes not being included on the initial load of server-side render?

When adding custom data attributes to standard HTML tags you'll find them missing on the first server-side render. Only after changing pages the data attributes show up. By turning off treeShakeClientOnly this issue vanishes. Any idea why this might be happening?

1 replies

Gaming

Programming