How load html template in vuejs

Question

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?

stackoverfloweth · Accepted Answer · 2021-04-28 12:43:08Z

2

+50

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`
    }
}

edited Apr 28, 2021 at 12:43

answered Apr 27, 2021 at 18:06

stackoverfloweth

6,9275 gold badges44 silver badges75 bronze badges

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

3 Comments

arivero Over a year ago

Yeah, it seems the right way. I had expected to find it in some of the webpages for Vue resources, examples, components, etc... Pity there is not a Vue "stdlib"

arivero Over a year ago

btw... axios.get() is always a Promise, isn't it?

stackoverfloweth Over a year ago

@arivero yeah, I was just stubbing in the http call, I don't know that OP uses axios so I use removed that

Andrey Kadnikov · Accepted Answer · 2020-01-07 00:38:00Z

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,
  }]
})

Andrey Kadnikov · Accepted Answer · 2020-01-05 01:18:37Z

0

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

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

answered Jan 5, 2020 at 1:18

Andrey Kadnikov

4656 silver badges17 bronze badges

1 Comment

Amin Over a year ago

No ... I want make a layout and load html templates in <router-view></router-view> by url

Collectives™ on Stack Overflow

How load html template in vuejs

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related