Vue-styleguidist: Nuxt with Property Decorator

[ozum]

Hi,

I'm using Nuxt with vue-property-decorator. I followed Nuxt example. I failed to compile with error messages below.

I also checked ts-class example. However cannot combine those. I need some guidance using Nuxt + class components.

For an example please see examples/nuxtjs/src/components/SomeComponent.vue in example repo: https://github.com/ozum/vue-styleguidist

./components/base/VNumeric.vue?vue&type=script&lang=ts& (./node_modules/vue-loader/lib??vue-loader-options!./components/base/VNumeric.vue?vue&type=script&lang=ts&)
Module not found: Can't resolve '~/composables/v-numeric' in '.../nuxt-ts-boilerplate/components/base'

./components/Logo.vue?vue&type=script&lang=ts& (./node_modules/vue-loader/lib??vue-loader-options!./components/Logo.vue?vue&type=script&lang=ts&) 13:0
Module parse failed: Unexpected character '@' (13:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import { Component, Vue } from "nuxt-property-decorator";
| 
> @Component({})

Thanks,

[elevatebart]

Hey hello @ozum,

It is a great question indeed, that could turn into an enhancement. As of now, when styleguidist is used with NuxtJs, I completely ignore it. Users of styleguidist have to re-write the webpack.config for loading their components.

For now, what you should do is add the proper loader for typescript in your webpackConfig param of styleguide.config.js. So that the vue loader can avoid being lost.

I would love for it to be automated and I believe we can.

@manniL is there a way to easily compile and access the webpack config used by NuxtJs?

Thank you both.
What

[manniL]

There was not for quite a while, but https://github.com/nuxt/nuxt.js/pull/7029 landed a couple of days ago. Available in nuxt-edge already.

Workaround until the next stable release could also be using the nuxt hook introduced in https://github.com/nuxt/nuxt.js/pull/6350#discussion_r320413069 to fetch the config (though the new command is the better way to go).

[elevatebart]

Thank @manniL,
@ozum check out this PR https://github.com/ozum/vue-styleguidist/pull/1

[ozum]

Thanks @manniL. I hope vue-styleguidist uses builtin nuxt webpack config in when this feature published.

@elevatebart, special thanks to spending time to create the example PR. I created a PR for this repo adding new example based on yours.

@ozum check out this PR https://github.com/ozum/vue-styleguidist/pull/1

For others, instead see nuxtjs-ts-property-decorator example.