nuxt-component-meta for Vue3

[benjamincanac]

The project should expose a route with parsed components (as json)

[benjamincanac]

@Tahul Should this be included in the @nuxt/admin module?

[atinux]

I believe so, I would also have thoughts of @pi0, @antfu and @danielroe regarding this.

The idea behind this is to expose the list of Nuxt components the project has in order to include them in the Milkdown editor, similar to Docus (was using Vue 2):

http://volta.s3.fr-par.scw.cloud/Screenshot_2022_04_14_at_16_27_21_9b3be3c68a.mp4

In the video, you can see the props and slots of this component: https://github.com/benjamincanac/docus-starter/blob/main/components/hero/Hero.vue

@farnabaz did the work on https://www.npmjs.com/package/nuxt-component-meta for Nuxt 2 / Vue 2 but I am wondering how we can support it for Vue 3?

[danielroe]

We already have a list:

import { componentNames } from '#build/components'
console.log(componentNames)

See nuxt/framework#4150 for more information. (It's also possible to import components directly from that file, e.g. import * from '#build/components'...)

[farnabaz]

As I quickly checked, seems that vue-docgen-api does not work properly with Vue3. There is an open issue for Vue3 support for a long time but not resolved yet.
However I think we can create custom parser for it to detect props and slots ... .

[atinux]

What about testing something like https://github.com/vuedx/languagetools/tree/main/packages/compiler-sfc ?

The goal here @danielroe is that Nuxt Admin is running not in the user's project. @nuxt/admin module would expose a JSON file with all the global components that we can use in the Markdown editor.

@farnabaz do we have the format of what we exposed in Nuxt 2 for the editor?

[pi0]

If you need additional meta such as props other than name I believe nuxt-component-meta's approach is really nice and components:extend is still available probably needs a vue3 SFC parser. I would only user runtimeConfig + API handler to expose rather than generating a templte.

[pi0]

In the longer term, btw we also need this for dev tools. Once you had a working version of component-meta for Nuxt 3, would be nice to discuss if we can expose it as a (lazy) function from nuxt 3 components. Having an external module would be helpful to avoid reinventing the wheel.

[atinux]

Fully agree, the code shall be able to be shared for both admin and devtools.

This is a first attempt: https://stackblitz.com/edit/nuxt-starter-jzedtw?file=nuxt.config.ts

It seems that I cannot get the props that easily, but is worth exploring since we shall use the official vue SFC compiler.

[antfu]

What are the fields we are expecting? name, filePath, props, slots?

[Tahul]

What are the fields we are expecting? name, filePath, props, slots?

Exactly! I thought we could also maybe use Volar internal packages to achieve that?

Maybe we could also support emits?

I know it parses slots & props nicely for Vue 3!

[atinux]

@kevinmarrec can you confirm the fields we need for Milkdown editor?

Current work done by @farnabaz is on nuxtlabs/nuxt-component-meta#17, do you need any help?

[farnabaz]

I don’t know if there is better way to extract extract prop types and defaults, rather than walking through AST tree or not.

@antfu maybe you have some ideas about the extraction or other possible solutions. nuxtlabs/nuxt-component-meta#17

[kevinmarrec]

Our editor is expecting an array of ComponentSchema.

A schema is a definition of a component, which includes its name, props & slots.

[farnabaz]

@kevinmarrec I just release v0.1.0, It misses some data about props but general schema should be same. https://github.com/nuxtlabs/nuxt-component-meta

Ping me if anything goes wrong

[benjamincanac]

Thank you @farnabaz!