Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How do you use this with nuxt? #26

Closed
rublev opened this issue Jan 27, 2021 · 7 comments
Closed

How do you use this with nuxt? #26

rublev opened this issue Jan 27, 2021 · 7 comments

Comments

@rublev
Copy link

rublev commented Jan 27, 2021

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
Copy link
Owner

meteorlxy commented Jan 28, 2021

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

npm i vue-showdown@2

@rublev
Copy link
Author

rublev commented Jan 28, 2021

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
Copy link
Owner

I'll add a notice in the documentation

@rublev
Copy link
Author

rublev commented Jan 28, 2021

@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
Copy link
Owner

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
Copy link
Author

rublev commented Jan 29, 2021

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
Copy link

ddahan commented Jan 30, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants