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:
185185 }
186186 }
187187
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+
188204 .. _`Vue.js` : https://vuejs.org/
189205.. _`vue-loader options` : https://vue-loader.vuejs.org/options.html
190206.. _`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