CODEWITHSUNDEEP
vue.jsnuxt.js
ATLChris
ATLChris

Reputation: 3296

How can I use "<nuxt-link>" in content rendered with "v-html"?

I have a utilities plugin for Nuxt.js that I created with a method to parse hashtags and mentions and replace them with <nuxt-link>. I am then using v-html to inject the converted data back into the template. My issue is that the <nuxt-link> are not being parsed with v-html.

import Vue from 'vue';

Vue.mixin({
  methods: {
    replaceMentions(data) {
      // Tags
      const tagRegEx = /\[#tag:[a-zA-Z0-9_-]*\]/g;
      let tagMatch;

      while ((tagMatch = tagRegEx.exec(data)) !== null) {
        const tag = Array.from(tagMatch[0].matchAll(/\[#tag:(.*?)\]/g));

        data = data.replace(tag[0][0], '<nuxt-link to="/search?q=' + tag[0][1] + '">#' + tag[0][1] + '</a>');
      };

      // Users
      const userRegEx = /\[@user:[a-zA-Z0-9_-]*\]/g;
      let userMatch;

      while ((userMatch = userRegEx.exec(data)) !== null) {
        const user = Array.from(userMatch[0].matchAll(/\[@user:(.*?)\]/g));

        data = data.replace(user[0][0], '<nuxt-link to="/users/' + user[0][1] + '">@' + user[0][1] + '</>');
      };

      return data;
    }
  }
});

Does anyone have any tips for how I could make these work as proper nuxt compatible links? I already tried using <a> and it works fine, I would just prefer to utilize proper nuxt compatible links.

Upvotes: 4

Views: 5587

Answers (1)

Carlana
Carlana

Reputation: 1129

I think the discussion here basically answers the question: https://github.com/nuxt-community/modules/issues/185

Summarized, there are two options:

  1. Render the HTML with a full Vue build and then attach the rendered node.
  2. (Preferred) Find the links in the HTML and make them call router push instead of their default action.

Upvotes: 3

Related Questions