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>

Can you please share your code on how you are importing 'marked' package? — haMzox
– haMzox, Commented Oct 3, 2019 at 9:47
I needed your component's code as well. Can you log the marked object in your component as well as on main.js? — haMzox
– haMzox, Commented Oct 3, 2019 at 9:55
CDN will work, as it is going to set a global object of marked. — haMzox
– haMzox, Commented Oct 3, 2019 at 9:56
I've added that but the cdn is converting it to 0. I'd rather not use the cdn though. — wilcode
– wilcode, Commented Oct 3, 2019 at 9:58

haMzox · Accepted Answer · 2019-10-03 10:03:46Z

3

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>

answered Oct 3, 2019 at 10:03

haMzox

2,1091 gold badge15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

haMzox Over a year ago

If that doesn't even work then try this example by removing the CDN stuff and adding loadash. jsfiddle.net/chrisvfritz/0dzvcf4d/…

TitanFighter · Accepted Answer · 2020-06-01 15:23:19Z

3

Example of how marked can be used globally.

main.js

import Vue from 'vue'
import App from './App.vue'

import router from './router'
import store from '@/store'

import marked from 'marked'

// Lets use the code below inside a components
// Vue.marked()
// this.$marked()
Vue.use({
  install () {
    Vue.marked = marked
    Vue.prototype.$marked = marked
  }
})

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

someFile.vue

<template>
    <div v-html="$marked(someMarkdownText)"></div>
</template>

export default {
    name: 'Terms',
    components: {},
    data () {
        return {
            someMarkdownText: '# hello',
        }
    },
    mounted () {}
}

edited Jun 1, 2020 at 15:23

answered Jun 1, 2020 at 15:00

TitanFighter

5,2044 gold badges55 silver badges81 bronze badges

Comments

wilcode · Accepted Answer · 2019-10-04 09:02:51Z

1

I used the latest version of the example and this worked straight away.

https://jsfiddle.net/yyx990803/v368d4g3/

    compiledMarkdown: function () {
      return marked(this.input, { sanitize: true })
    }
  },

answered Oct 4, 2019 at 9:02

wilcode

6252 gold badges10 silver badges25 bronze badges

Comments

y_nk · Accepted Answer · 2019-10-23 15:16:46Z

1

The reason why is because filters are not meant to be used in a v-html directive. When doing so, marked is looked upon properties/methods of the component, which is, indeed, not declared (since it's a filter).

The only ways for you are to move marked to data() or methods{} or even better, build a computed property out of it (so it's cached).

It could have been possible if there was a {{{ }}} in the template engine, but as there's not, what you want to achieve is impossible.

PS: the example you mentioned is working because it's using Vue v1.0 ; only updating the dependencies would make that fiddle fail.

edited Oct 23, 2019 at 15:16

answered Oct 23, 2019 at 15:07

y_nk

2,3052 gold badges23 silver badges31 bronze badges

Collectives™ on Stack Overflow

Vue.js markdown filter

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related