Demo broken

[jvolker]

The demo seems broken.

While starting the app it throws: Cannot start nuxt: Cannot find module '@nuxt/image-edge' It happens following the instructions of the Readme installing locally

git clone https://github.com/davestewart/nuxt-content-assets.git
cd nuxt-content-assets
npm install
npm run dev

as well as using the provided link: https://stackblitz.com/github/davestewart/nuxt-content-assets?file=demo%2Fapp.vue

[yahiaboudah]

Same issue, anyone found a fix?

[davestewart]

Sorry folks, have been away from oss for a bit. Let me check and get back to you

[davestewart]

OK, on this today. Will release shortly

[jvolker]

Thanks for fixing this. Following the instructions, the demo seems to work for the most part now. Only the Nuxt Image component example throws this error: Uncaught (in promise) TypeError: $img is not a function

Also, the online demo is not working, throwing this error: [23:54:41] ERROR Cannot start nuxt: Cannot find module '/home/projects/wmaikrxvl.github/demo/@nuxt/image'

[davestewart]

Hi Jeremias,

I can't reproduce the Nuxt image bug here.

Could you raise a new ticket (be sure to use the bug template) and provide full details, including:

• error stack
• where the bug appears (client, server, cli, etc)
• when the bug appears (build, navigating to page, etc)

I'll check the demo as well.

Thanks!

[davestewart]

OK, looking at the demo, the issue is certainly with the Nuxt Image import.

This was always a bit of a hack I guess I need to find a better way to load the NuxtImg component on demand.

Ideas welcome!

[davestewart]

Well I can't seem to get Nuxt Image working at all in the demo.

This is using <nuxt-img ... /> on the demo main page:

As far as I can tell it is all configured correctly.

Should this not "just work"?

[davestewart]

I've put the above code into a branch, bug/nuxt-img:

• branch root
• demo content index
• demo config

This is the demo content:

---
title: Nuxt Content Assets - Demo
---

<nuxt-img src="splash.png" style="margin: -20px 0" />

# Demo

...

This is the error:

[Vue warn]: Failed to resolve component: nuxt-img
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <MDCRenderer body= {type: 'root', children: Array(1), toc: {…}} data= {_path: '/main', _dir: '', _draft: false, _partial: false, _locale: '', …} tag="div"  ... > 
  at <ContentRendererMarkdown value= {_path: '/main', _dir: '', _draft: false, _partial: false, _locale: '', …} excerpt=false tag="div" > 
  at <ContentRenderer value= {_path: '/main', _dir: '', _draft: false, _partial: false, _locale: '', …} excerpt=false tag="div" > 
  at <ContentQuery path="/main" find="one" > 
  at <ContentDoc key="/" path="/main" > 
  at <App key=3 > 
  at <NuxtRoot>

Suspect I am just missing basic Nuxt / Nuxt Content knowledge.

I was under the impression if it's in #components it's already global?

Do I need to do something special to have Nuxt Content see NuxtImg components (which are already registered) ?

cc @farnabaz ?

EDIT: OK, Nuxt Image is working; if I place this code in my app file, it works:

    <nuxt-img src="/assets/images/sicilian-fish-stew.jpg"
              sizes="100vw sm:50vw md:400px"

So the challenge I guess is making NuxtImg global so Content can see it.

Right now I'm using a "global" folder and the funky import:

• https://github.com/davestewart/nuxt-content-assets/blob/main/demo/components/content/NuxtImg.ts

// /components/content/NuxtImg.ts
import { h } from 'vue'
import NuxtImg from '../../node_modules/@nuxt/image/dist/runtime/components/nuxt-img.mjs'

export default function render (attrs: Record<string, any>) {
  return h(NuxtImg, attrs)
}

But I want to avoid that if possible.

[ThomasWT]

Caught you on Twitter but leaving the solution here.

Should be solved by running npm install in both the root directory and in ./demo

https://stackblitz.com/edit/github-wc2y8l-tfy7ap?file=.stackblitzrc

[davestewart]

Closed by #54

[jvolker]

Thanks for fixing this.

Should be solved by running npm install in both the root directory and in ./demo

Would be good to add this to the setup instructions.