README

Compile vue files to twig templates with PHP

Directives

Other Functionalities

Limitations

It's difficult to interpret JavaScript language features and translate them into twig.

For example, string concatenation within attribute binding is not currently working properly: 🚫

This example works:

<template>
    <div :style="'fontSize: ' + (size + 10) + 'px'"></div> 
</template>

<script>
export default {
  props: {
    size: {
      type: number,
      required: true,
    },
  },
};
</script>

<div style="{{ 'fontSize: ' ~ (size + 10) ~ 'px' }};"></div>

But this example doesn't work correct:

<template>
    <div :style="'fontSize: ' + (foo.size + 10) + 'px'"></div> 
</template>

<script>
export default {
  props: {
    foo: {
      type: object,
      required: true,
    },
  },
};
</script>

<div style="{{ 'fontSize: ' ~ (foo.size ~ 10) ~ 'px' }};"></div>