Vue 3 support

[vincerubinetti]

Thanks for this library, but it seems like it doesn't support Vue 3 with Typescript (correct me if I'm wrong).

Trying a basic example:

import { defineComponent } from "vue";
import VueMarkdown from "vue-markdown-render";

export default defineComponent({
  components: { VueMarkdown },
});

I get the following error on the components: { VueMarkdown } line:

No overload matches this call.
  The last overload gave the following error.
    Type 'Component<DefaultData<never>, DefaultMethods<never>, DefaultComputed, Record<string, any>>' is not assignable to type 'Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>'.
      Type 'ComponentOptions<never, DefaultData<never>, DefaultMethods<never>, DefaultComputed, Record<string, any>, Record<string, any>>' is not assignable to type 'Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>'.
        Type 'ComponentOptions<never, DefaultData<never>, DefaultMethods<never>, DefaultComputed, Record<string, any>, Record<string, any>>' is not assignable to type 'ComponentOptions<any, any, any, 
Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, any, any, any>'. 
          Type 'ComponentOptions<never, DefaultData<never>, DefaultMethods<never>, DefaultComputed, 
Record<string, any>, Record<string, any>>' is not assignable to type 'ComponentOptionsBase<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, ... 4 more 
..., {}>'.
            Types of property 'components' are incompatible.
              Type '{ [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>; } | undefined' is not assignable to type 'Record<string, Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>> | undefined'.
                Type '{ [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>; }' is not assignable to type 'Record<string, Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>>'.
                  Index signatures are incompatible.
                    Type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>' is not assignable to type 'Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>'.
                      Type 'ComponentOptions<never, any, any, any, any, Record<string, any>>' is not assignable to type 'Component<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions>'.
                        Type 'ComponentOptions<never, any, any, any, any, Record<string, any>>' is not assignable to type 'ComponentOptions<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, any, any, any>'.
                          Type 'ComponentOptions<never, any, any, any, any, Record<string, any>>' is not assignable to type 'ComponentOptionsBase<any, any, any, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, ... 4 more ..., {}>'.
                            Types of property 'directives' are incompatible.
                              Type '{ [key: string]: DirectiveFunction | DirectiveOptions; } | undefined' is not assignable to type 'Record<string, Directive<any, any>> | undefined'.
                                Type '{ [key: string]: DirectiveFunction | DirectiveOptions; }' is not assignable to type 'Record<string, Directive<any, any>>'.
                                  Index signatures are incompatible.
                                    Type 'DirectiveFunction | DirectiveOptions' is not assignable to type 'Directive<any, any>'.
                                      Type 'DirectiveFunction' is not assignable to type 'Directive<any, any>'.
                                        Type 'DirectiveFunction' is not assignable to type 'DirectiveHook<any, any, any>'.
                                          Types of parameters 'binding' and 'binding' are incompatible.
                                            Property 'name' is missing in type 'DirectiveBinding<any>' but required in type 'DirectiveBinding'.

I'm not an expert in Typescript or in the differences between Vue 2 and 3, but it seems like the types that Vue is expecting for components might have changed.

[p-kuen]

Hello, thanks for your Issue. I will have a look at it soon. I think I have to release a new major version which only works with vue 3.

[korgan00]

@p-kuen Take a look to vue-demi, you should be able to keep same syntax and use the component on both vue2 and vue3

[stafyniaksacha]

Here is a sample of the component that work with vue 3

<script lang="ts">
import type { PropType } from 'vue'
import { defineComponent, computed, h } from 'vue'

import MarkdownIt, { Options as MarkdownItOptions } from 'markdown-it'

export default defineComponent({
  name: 'VueMarkdown',
  props: {
    source: {
      type: String,
      required: true,
    },
    options: {
      type: Object as PropType<MarkdownItOptions>,
      default: () => ({}),
      required: false,
    },
  },
  setup(props, { attrs }) {
    const md = new MarkdownIt(props.options)

    const content = computed(() => {
      const src = props.source
      return md?.render(src)
    })

    return () =>
      h('div', {
        ...attrs,
        innerHTML: content.value,
      })
  },
})
</script>

[Germey]

Here is a sample of the component that work with vue 3

<script lang="ts">
import type { PropType } from 'vue'
import { defineComponent, computed, h } from 'vue'

import MarkdownIt, { Options as MarkdownItOptions } from 'markdown-it'

export default defineComponent({
  name: 'VueMarkdown',
  props: {
    source: {
      type: String,
      required: true,
    },
    options: {
      type: Object as PropType<MarkdownItOptions>,
      default: () => ({}),
      required: false,
    },
  },
  setup(props, { attrs }) {
    const md = new MarkdownIt(props.options)

    const content = computed(() => {
      const src = props.source
      return md?.render(src)
    })

    return () =>
      h('div', {
        ...attrs,
        innerHTML: content.value,
      })
  },
})
</script>

Works for me, thanks!

[p-kuen]

Since 2.0.0 this package is compatible with vue 3, since 2.1.1 this package also uses the composition api. Therefore this issue will be closed.