Functional templates allow you to create components consisting of only the template tag and exposing the props passed into the template with the props object off of the template context. This approach allows you to build simple configurable templates without having to write any backing code.

 

From the code in previous post:

 

We create two functional template component 'Header' and 'Footer':

 

Functional template works pretty much like React functional component:

const header = props => 
     
      {
   {props.header}}
     

Just in Vue, you just need to add 'functional' directive to the <template>, don't need to add any js code.

 

exports those componets in components/index.js file:

export { default as Header } from "./Header"export { default as Footer } from "./Footer"

 

Using those component to refactor the code: