Skip to content

Commit

Permalink
Merge branch '4.4' into 5.0
Browse files Browse the repository at this point in the history
* 4.4:
  Add twig vue js tip
  • Loading branch information
javiereguiluz committed Jul 6, 2020
2 parents 3feae69 + e29be27 commit 46550da
Showing 1 changed file with 16 additions and 0 deletions.
16 changes: 16 additions & 0 deletions frontend/encore/vuejs.rst
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,22 @@ you can import them with ``require()`` function:
}
}
Using Vue inside Twig templates
-------------------------------

Twig templates can instantiate a Vue.js app in the same way as any other
JavaScript code. However, given that both Twig and Vue.js use the same delimiters
for variables, you should configure the ``delimiters`` Vue.js option to change
the default variable delimiters.

If you set for example ``delimiters: ['${', '}$']``, then you can use the
following in your Twig templates:

.. code-block:: twig
{{ twig_variable }} {# renders a Twig variable #}
${ vuejs_variable }$ {# renders a Vue.js variable #}
.. _`Vue.js`: https://vuejs.org/
.. _`vue-loader options`: https://vue-loader.vuejs.org/options.html
.. _`Encore's index.js file`: https://github.com/symfony/webpack-encore/blob/master/index.js
Expand Down

0 comments on commit 46550da

Please sign in to comment.