Loading Vue components as shortcodes

user_2111248 0
Viewed 138

I'm relatively new to Vue and been creating a CMS using vue.

I'm getting html content from CMS to show on page, while sometimes there may be dynamic content to be loaded within that html content.

For example I want to receive html content like:

<div><p>Lorem Ipsum</p>[ProjectList]<p>Some more content</p></div>

So I want to dynamically change the content and replace "[ProjectList]" with template to show from a component itself.

Not sure if it's possible or not with vue, but looks like a handy thing to have.

Thanks in advance.

vuejs3 vue-component vue.js
1 Answers

Yes you can change the dynamic content and replace the html content from CMS to show it your vue component using v-html

Step 1: Create an html template

<template>
  <div id="app">
    <div v-html="projectlist" />
  </div>

</template>

Step 2: Create a model data

data() {
    return {
      projectlist: `<div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
        <h2 class="u-custom-font u-text u-text-palette-1-base u-text-1">Limited-Time Offers</h2>
        <div class="u-expanded-width u-list u-repeater u-list-1">
          <div class="u-container-style u-list-item u-palette-2-light-3 u-repeater-item u-video-cover u-list-item-1">
            <div class="u-container-layout u-similar-container u-valign-top u-container-layout-1">
              <img alt="" class="u-expanded-width u-image u-image-default u-image-1" src="//images03.nicepage.com/c461c07a441a5d220e8feb1a/12f6f82cb14d52aea02f8984/r-min.jpg">
              <div class="u-align-center u-container-style u-expanded-width u-group u-group-1">
                <div class="u-container-layout u-valign-top u-container-layout-2">
                  <h4 class="u-custom-font u-font-oswald u-text u-text-2">Modern T-Shirt</h4>
                  <h6 class="u-text u-text-3">$20.00</h6>
                  <a href="https://nicepage.com" class="u-btn u-btn-rectangle u-button-style u-none u-text-palette-1-base u-btn-1">add to cart</a>
                </div>
              </div>
            </div>
          </div>
          <div class="u-align-center u-container-style u-list-item u-palette-2-light-3 u-repeater-item u-video-cover u-list-item-2">
            <div class="u-container-layout u-similar-container u-valign-top u-container-layout-3">
              <img alt="" class="u-expanded-width u-image u-image-default u-image-2" src="//images03.nicepage.com/c461c07a441a5d220e8feb1a/76fd3428e82f5e0eaf8de69b/t.jpg">
              <div class="u-align-center u-container-style u-expanded-width u-group u-video-cover u-group-2">
                <div class="u-container-layout u-valign-top u-container-layout-4">
                  <h4 class="u-custom-font u-font-oswald u-text u-text-4">Women Dress</h4>
                  <h6 class="u-text u-text-5">$60.00</h6>
                  <a href="https://nicepage.com" class="u-btn u-btn-rectangle u-button-style u-none u-text-palette-1-base u-btn-2">add to cart</a>
                </div>
              </div>
            </div>
          </div>
          <div class="u-align-center u-container-style u-list-item u-palette-2-light-3 u-repeater-item u-video-cover u-list-item-3">
            <div class="u-container-layout u-similar-container u-valign-top u-container-layout-5">
              <img alt="" class="u-expanded-width u-image u-image-default u-image-3" src="//images03.nicepage.com/c461c07a441a5d220e8feb1a/3d2df233df16571295fd0b1a/sdsee.jpg">
              <div class="u-align-center u-container-style u-expanded-width u-group u-video-cover u-group-3">
                <div class="u-container-layout u-valign-top u-container-layout-6">
                  <h4 class="u-custom-font u-font-oswald u-text u-text-6">Women Cotton Top</h4>
                  <h6 class="u-text u-text-7">$17.00</h6>
                  <a href="https://nicepage.com" class="u-btn u-btn-rectangle u-button-style u-none u-text-palette-1-base u-btn-3">add to cart</a>
                </div>
              </div>
            </div>
          </div>
          <div class="u-align-center u-container-style u-list-item u-palette-2-light-3 u-repeater-item u-video-cover u-list-item-4">
            <div class="u-container-layout u-similar-container u-valign-top u-container-layout-7">
              <img alt="" class="u-expanded-width u-image u-image-default u-image-4" src="//images03.nicepage.com/c461c07a441a5d220e8feb1a/decde24fe9235e328b8de453/erw.jpg">
              <div class="u-align-center u-container-style u-expanded-width u-group u-video-cover u-group-4">
                <div class="u-container-layout u-valign-top u-container-layout-8">
                  <h4 class="u-custom-font u-font-oswald u-text u-text-default u-text-8">Summer Dress</h4>
                  <h6 class="u-text u-text-9">$23.00</h6>
                  <a href="https://nicepage.com" class="u-btn u-btn-rectangle u-button-style u-none u-text-palette-1-base u-btn-4">add to cart</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>`,
    };
 }

I created an example with mock data. Similarly in your application you can load data from REST API call using axios and render your CMS code inside vue component

DEMO

user_26893250
Related