How to generate HTML from .vue component

Question

I want to create simple static site generator that use VueJS.

I have simple vue component:

<template>
  <div>
    <v-child
      v-for="child in children"
      :title="'Child ' + child.id"
      :key="child.id"
    >
      {{ child.name }}
    </v-child>
  </div>
</template>

<script>
import children from './children';

export default {
  data () {
    return {
      children
    };
  }
}
</script>

and want to implement function that generates HTML from it:

describe('generateHTML', () => {
  it('generates HTML from vue component', async () => {
    expect(await generateHTML(__dirname + '/fixtures/v-parent.vue'))
      .to.equal('<div><div class="child"><div>Child 1</div><div>First</div></div><div class="child"><div>Child 2</div><div>Second</div></div></div>')
  });
});

Do you have some idea / tips how can I do it ?

Here is repo that reproduces my issue: lusarz/vue-questions

Just run:

npm install
npm run test

I did some initial tries, but now it works like:

nmanikiran · Accepted Answer · 2019-02-05 10:45:31Z

2

you can use mount function from @vue/test-utils

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

describe('Foo Component', () => {
  it('check rendered component html', () => {
    const wrapper = mount(Foo)
    expect(wrapper.html()).toBe("<--- Your Html --->")
  })
})

answered Feb 5, 2019 at 10:45

nmanikiran

3,1961 gold badge19 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

How to generate HTML from .vue component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related