php-vue-to-twig

Compile vue files to twig templates with PHP

Directives

Directive	Implemented
v-text	✅
v-html	✅
v-show	✅
v-if	✅
v-else	✅
v-else-if	✅
v-for	✅
v-on	✅
v-bind	partially working
v-bind:style	✅
v-bind:class	✅
v-model	partially working
v-pre	✅
v-cloak	✅
v-once	✅

Other Functionalities

Functionality	Implemented
Slots	partially working
Components	✅
Filters

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>