paneon / php-vue-to-twig

0.32.2 2022-01-04 10:22 UTC

Requires

• php: ^7.3|^8.0
• ext-dom: *
• ext-libxml: *
• ramsey/uuid: ^3.8
• scssphp/scssphp: ^1.9
• squizlabs/php_codesniffer: ^3.3

Requires (Dev)

• ext-simplexml: *
• friendsofphp/php-cs-fixer: ^2.16
• monolog/monolog: ^1.24
• phpstan/phpstan: ^0.12
• phpunit/phpunit: ^9

MIT

• Alexander Pape

Published on Packagist.org on 2022-01-04 10:22 UTC

README

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>