meteorlxy / vue-showdown

:page_with_curl: Use showdown as a vue component
https://vue-showdown.js.org
MIT License
129 stars 23 forks source link

How do you use this with nuxt? #26

Closed rublev closed 3 years ago

rublev commented 3 years ago

I've tried the following:

plugins/showdown.js

import Vue from 'vue'
import { VueShowdownPlugin } from 'vue-showdown'

Vue.component('vue-showdown', VueShowdownPlugin)

I've also tried:

Vue.use(VueShowdownPlugin, {
  options: {
    emoji: true,
  },
})

which results in a Cannot read property 'install' of undefined error.

nuxt.config.js

plugins: [
  { src: '~/plugins/showdown.js', mode: 'client' },
],

component

<VueShowdown markdown="`vue-showdown` is easy to use :kissing_heart:" />

And I get this error:

image

meteorlxy commented 3 years ago

Current latest version is for vue 3 only. You should check out the v2 branch.

npm i vue-showdown@2
rublev commented 3 years ago

Current latest version is for vue 3 only. You should check out the v2 branch.

npm i vue-showdown@2

I was using 2.4.1 in the OP.

meteorlxy commented 3 years ago

I'll add a notice in the documentation

rublev commented 3 years ago

@meteorlxy Like how to integrate with nuxt? I still have no idea how to do this, I'm like two days into this now :( Why is this closed?

I'm able to have it functioning if I follow a URL to a page that uses VueShowdown, but if I load the page with it I get render function or template not defined in component: anonymous despite wrapping it up like so:

<div v-if="content">
  <client-only>
    <VueShowdown :markdown="content" />
  </client-only>
</div>

Loading it like so:

import { VueShowdown } from 'vue-showdown'
...
components: {
  VueShowdown,
},

Works fine on localhost.

meteorlxy commented 3 years ago

Well, I closed this issue because your original post is invalid usage.

For v3:

import { createApp } from 'vue';
import { VueShowdownPlugin } from 'vue-showdown';

For v2:

import Vue from 'vue'
import VueShowdown from 'vue-showdown'

What you did:

import Vue from 'vue'
import { VueShowdownPlugin } from 'vue-showdown'
rublev commented 3 years ago

Yes thank you I know what I did, none of these combinations work either way. Were you able to get either v2 or v3 working with Nuxt? I ended up just ripping it out from the source and it works fine now since it's impossible to use with Nuxt successfully.

Thanks anyways.

ddahan commented 1 year ago

For those taking a look to this issue, using Nuxt 3, you have absolutely nothing to do to make it work. Just install the plugin with npm, and there in the component: import { VueShowdown } from "vue-showdown"; It's surprisingly easy.