File tree Expand file tree Collapse file tree 1 file changed +16
-0
lines changed Expand file tree Collapse file tree 1 file changed +16
-0
lines changed Original file line number Diff line number Diff line change @@ -185,6 +185,22 @@ you can import them with ``require()`` function:
185
185
}
186
186
}
187
187
188
+ Using Vue inside Twig templates
189
+ -------------------------------
190
+
191
+ Twig templates can instantiate a Vue.js app in the same way as any other
192
+ JavaScript code. However, given that both Twig and Vue.js use the same delimiters
193
+ for variables, you should configure the ``delimiters `` Vue.js option to change
194
+ the default variable delimiters.
195
+
196
+ If you set for example ``delimiters: ['${', '}$'] ``, then you can use the
197
+ following in your Twig templates:
198
+
199
+ .. code-block :: twig
200
+
201
+ {{ twig_variable }} {# renders a Twig variable #}
202
+ ${ vuejs_variable }$ {# renders a Vue.js variable #}
203
+
188
204
.. _`Vue.js` : https://vuejs.org/
189
205
.. _`vue-loader options` : https://vue-loader.vuejs.org/options.html
190
206
.. _`Encore's index.js file` : https://github.com/symfony/webpack-encore/blob/master/index.js
You can’t perform that action at this time.
0 commit comments