CODEWITHSUNDEEP
htmlvue.jstemplates
Amin
Amin

Reputation: 397

How load html template in vuejs

I use vue.js and vue-router.js. I added both of files to a html page

This is my component for load template... const Dashboard = {template: "<strong>"}

But I want load html page dynamically and with HTTP URL. const Dashboard = {template: "How load html page with url(http)"}

Can anyone guide me?

Upvotes: 1

Views: 3337

Answers (3)

stackoverfloweth
stackoverfloweth

Reputation: 6917

you could define a component similar to this

Vue.component('dynamic-component', {
    props: {
        contentURL: String,
    },
    template: `<div v-html='inner_html'></div>`,
    computed: {
        inner_html() {
            return // http call to get html value utilizing this.contentURL
        },
    },
});

then from the router

{
    path: '/path/option-a',
    components: {
        DynamicComponent
    },
    props: {
        contentURL: `https://some-resource/option-a`
    }
},
{
    path: '/path/option-b',
    components: {
        DynamicComponent
    },
    props: {
        contentURL: `https://some-resource/option-b`
    }
}

Upvotes: 2

Andrey Kadnikov
Andrey Kadnikov

Reputation: 465

For creating layers, you can create vue component and use slot

Layout.vue

<template>
  Header
  AnyComponents
  <slot />
  Footer
</template>

and in your page component you should import your layout and wrap

MainPage.vue

<template>
  <MainLayout>
    Here is your conntent of page or router
    <router-view />
  </MainLayout>
</template>

<script>
import MainLayout from 'layout.vue';

export default {
  components: {
    MainLayout
  }
}
</script>

And now for render your page you should use your page in router

example of router.js

import Vue from 'vue';
import Router from 'vue-router'

import MainPage from 'MainPage.vue';

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    component: MainPage,
  }]
})

Upvotes: 1

Andrey Kadnikov
Andrey Kadnikov

Reputation: 465

If you want to insert html to your page, use v-html

<div class="content" v-html="dashboard.template">
</div>

Upvotes: 0

Related Questions