Vue.js markdown filter

Question

I'm using Evan You's example of how to convert HTML to markdown - https://jsfiddle.net/yyx990803/oe7axeab/.

Installing the marked package through npm and then implementing this leads to the error, 'marked' is not defined.

If I include the cdn link in my index.html file, the markdown is then converted to "0" and I get the error:

[Vue warn]: Property or method "marked" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

EDIT:

I tried to include it in my main.js as follows:

import App from './App.vue';
import router from './router';
import store from './store';

import './css/main.css';
import i18n from './i18n';
import marked from 'marked';

const debugSetting = window.ApplicationConfig.DEBUG;
Vue.config.debug = debugSetting;

Vue.config.productionTip = false;

new Vue({
    router,
    store,
    i18n,
    marked,

    render: function(h) {
        return h(App);
    },
}).$mount('#app');

This doesn't feel right though, hence why I tried with the cdn just to see if that at least worked.

component

<template>
    <main-layout>
        <div class="wrapper" v-html="terms | marked"></div>
    </main-layout>
</template>

<script>
import MainLayout from '@/layouts/Main.vue';

import { getTerms } from '../api';

export default {
    name: 'Terms',
    components: {
        MainLayout,
    },
    data() {
        return {
            terms,
        };
    },
    filters: {
        marked: marked,
    },
    async mounted() {
        try {
            const response = await getTerms();

            if (response) {
                this.terms = response.data;
                console.log(this.terms);
            }
        } catch (err) {
            console.log(err);
        }
    },
};
</script>

Answer 1

You are missing the marked import. Globally injecting it to main.js will not help!

<template>
    <main-layout>
        <div class="wrapper" v-html="terms | marked"></div>
    </main-layout>
</template>

<script>
...
import marked from 'marked';
...
</script>