Skip to content

Commit 1dcd7ac

Browse files
committed
minor #13909 Add twig vue js tip (94noni)
This PR was squashed before being merged into the 4.4 branch. Discussion ---------- Add twig vue js tip Hello I think documenting this tip is a good idea when integrating a vue js app inside an existing twig template, as it can be easier to combine both variables systems So that twig uses `{{ twig_var }}` and vue may use for example `${ vuejs_var }$` -------- I do not know if the tip is ok for the doc, and moreover if it is the proper place Thx Commits ------- 3bf6394 Add twig vue js tip
2 parents 71e7144 + 3bf6394 commit 1dcd7ac

File tree

1 file changed

+18
-0
lines changed

1 file changed

+18
-0
lines changed

frontend/encore/vuejs.rst

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,24 @@ you can import them with ``require()`` function:
153153
}
154154
}
155155
156+
Embeded with Twig
157+
-----------------
158+
159+
You can of course, inside a Twig template rendered from a controller,
160+
instantiate a Vue.js app as any other JavaScript code.
161+
162+
.. tip::
163+
164+
You may in this case leverage the delimiters options
165+
to not overlap with Twig ones.
166+
For example, using `delimiters: ['${', '}$']` inside the Vue.js instance.
167+
168+
.. code-block:: twig
169+
170+
{{ twig_var }} renders a Twig variable
171+
${ vuejs_var }$ renders a Vue.js variable
172+
173+
156174
.. _`Vue.js`: https://vuejs.org/
157175
.. _`vue-loader options`: https://vue-loader.vuejs.org/options.html
158176
.. _`Encore's index.js file`: https://github.com/symfony/webpack-encore/blob/master/index.js

0 commit comments

Comments
 (0)