Trying to integrate components into a Nuxt project by following the steps outlined here: https://github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an-npm-module
Nuxt doesn't use a main.js file (it's plugin-based), so I created a "plugin" and imported the code as follows (this is recommended by Nuxt for other libraries too):
vue-design-system.js
import Vue from 'vue'
import system from 'fp-design-system'
import 'fp-design-system/dist/system/system.css'
Vue.use(system)
In my configuration, I have (other code in config removed):
nuxt.config.js
module.exports = {
css: [
{ src: 'fp-design-system/dist/system/system.css', lang: 'css' }
],
plugins: [
{ src: '~plugins/vue-design-system', ssr: true }
]
}
When running npm run dev in my theme, it builds but triggers a warning:
WARNING Compiled with 1 warnings warning in ./plugins/vue-design-system.js 7:8-14 "export 'default' (imported as 'system') was not found in 'fp-design-system'
The issue seems to be with the generated system.js regarding export (while running npm run build:system).
On my page, when trying to use a component from the design system, I encounter this error:
NuxtServerError Cannot find module 'fp-design-system/src/elements/TextStyle' from '/Users/paranoidandroid/Documents/websites/Nuxt-SSR'
If I hard refresh the page, another message pops up:
NuxtServerError render function or template not defined in component: anonymous
Any insights on what might be going wrong here? It would be great to resolve this issue.
Currently uncertain if it's an issue with Nuxt or Vue Design System. Leaning towards the latter because my Nuxt setup is pretty bare-bones...so it's unlikely something else causing this.
Thank you.
Repository on GitHub:
Here is the repo for my "theme," however, to make it work, you'll need to create a separate design system with the same name and follow the steps to utilize the design system as a local (file) NPM module.
https://github.com/michaelpumo/Nuxt-SSR
console.log of system (from the JS import statement)