Vue function h()를 통해 nuxt-link(vue-router) component를 생성하는 경우

vue-router, nuxt-link의 경우에는 element가 아닌 component다.

그리고 해당 component의 경우 to props를 강제하고 있는데 이전 포스트에서 설명했듯, 아래와 같이 생성하면 to가 없다고 오류를 띄운다.

export default {
  render(h) {
    return h('nuxt-link', { to: '/home' }) // domProps에 넣어도 안됨
  }
}

필자는 이 오류 때문에 한 2시간은 구글을 뒤져봤던 것 같다....

 

해결 방법은 아래와 같다.

export default {
  render(h) {
    const vnode = h('nuxt-link', attributes, children);
    vnode.componentOptions.propsData.to = '/home';
    return vnode
  }
}

vue-router, nuxt-link가 dom이 아닌 component였기에 이런 오류가 발생했던 것이 아닌가 싶다.