Skip to content

Paneon/php-vue-to-twig

Repository files navigation

php-vue-to-twig

CI

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>