Vue convert functional component to Vue 3

Question

I would like to migrate my Vue 2 functional component to Vue 3. I read their official docs but don't understand it.

I have for example this component:

module.exports = (name, path, ariaLabel) => `<template functional>
  <div
    :class="['main-${name}', props.width ? 'default-width' : undefined]"
  >
  <span  v-if="title">${title}</span>
  <span> hello </span>
  </div>
</template>

<script>
export default {
  name: 'test-${name}',
  props: {
    width: {
      type: [Number, String],
      default: null
    },
    title: {
      type: String,
      required: false
    },
  }
}
</script>
<style src="./style.css"/>
`

I got this far converting to Vue 3:

import { h } from 'vue'

const MyComponent = (props, context) => {
    return h(`div${props.name}`, context.attrs, context.slots)
}

MyComponent.props = {
    width: {
        type: [Number, String],
        default: null
    },
    title: {
        type: String,
        required: false
    },
}

import styles from './style.css';

export default MyComponent;

How do I properly import CSS? How would I add the nested span and the classes?

tony19 · Accepted Answer · 2020-10-17 18:19:40Z

4

Styles

External CSS files can be imported into the file, and those styles will automatically be applied to the component:

import './MyComponent.css'

`props.name`

You're using props.name, which isn't declared, so make sure to add it to props:

MyComponent.props = {
  //...
  name: {
    type: String,
    required: true,
  },
}

`h()` Arguments

The 2nd argument of h() is an object of attributes, which includes class, so you would pass the multiple class names under the class key.
The 3rd argument of h() can be a string, slots, or an array of child elements, which are also created with h(), so you could nest the <span>s by passing them in an array.

import { h } from 'vue'

const MyComponent = ({ name, width, title }) =>
  h(
    'div',

    // 1
    {
      class: `main-${name} ${width && 'default-width'}`
    },

    // 2
    [
      title && h('span', null, title), // conditional on `title`
      h('span', null, ' hello ')
    ]
  )

demo

JSX

Projects generated with Vue CLI also support JSX out of the box, which might be more straightforward given how close it is to the original HTML. Here's the equivalent of the h() calls above:

const MyComponent = ({ name, width, title }) =>
  <div class={`main-${name} ${width && 'default-width'}`}>
    {title && <span>{title}</span>}
    <span> hello </span>
  </div>

edited Oct 17, 2020 at 18:19

answered Oct 17, 2020 at 5:51

tony19

140k23 gold badges281 silver badges354 bronze badges

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

3 Comments

tony19 Over a year ago

@DouglasGaskell In Vue 3, the context argument of render includes slots, which contains the children nodes. You can pass that along in createElement('div', null, context.slots) to forward the children.

Roland Over a year ago

awesome solution! Do you know though how to type Functional Component in a non hacky way? I found FunctionalComponent type which is great but I can't find a recommended way to type Props or Attrs without using as

Roland Over a year ago

nvm found it! I can pass a type into the FunctionalComponent Generic. Gonna post another comment with the solution soon

Collectives™ on Stack Overflow

Vue convert functional component to Vue 3

1 Answer 1

Styles

`props.name`

`h()` Arguments

JSX

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Styles

props.name

JSX

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related

`props.name`