Use with .vue files

Hello!

I’m having problems using this with .vue files, is there a way you know of to work around this? What seems to be happening is that vue-loader replaces the render function set by insertRenderer.

[ktsn]

Well, you seems to be misunderstanding how vue-loader and HoC work. vue-loader injects compiled template into exported object. If you want to use template in the .vue file, you should export the original object (in your example, you should export Component rather than connected object). So, you need to separate the original component and the wrapped component in different files.

<!-- MyComponent.vue -->
<template>
  <div>
    Hello {{name}}!
  </div>
</template>

<script>
export default {
  name: 'my-component',
  props: ['name'],
  created () {
    alert(`[created]: ${this.name}`)
  }
}
</script>

// MyConnectedComponent.js
import { connect } from 'vuex-connect'
import MyComponent from './MyComponent.vue'

export default connect({
  stateToProps: {
    name: state => state.name
  }
})('my-connected-component', MyComponent)

BTW, I think HoC should not be declared in .vue file because it should just connect store and component.

[linde12]

No, i’m not misunderstanding, i just explained how it worked? 😕

That’s exactly what i’m saying; why should you have to create two files to make one connected component? Look at React where you have “container components” that do both things in one file.

I just think that developers shouldn’t have to adjust their javascript code because they’re in a .vue file. Using higher order functions should always work imo.

Having to use two separate files for our “smart” components is off-putting, because it’s extra and unnecessary work.

Anyway, if it’s not going to be supported i think it should at least be noted that it won’t work in .vue files and that you should have to use two separate files or render functions.