File tree Expand file tree Collapse file tree 1 file changed +10
-12
lines changed Expand file tree Collapse file tree 1 file changed +10
-12
lines changed Original file line number Diff line number Diff line change @@ -153,23 +153,21 @@ you can import them with ``require()`` function:
153153 }
154154 }
155155
156- Embeded with Twig
157- -----------------
156+ Using Vue inside Twig templates
157+ -------------------------------
158158
159- You can of course, inside a Twig template rendered from a controller,
160- instantiate a Vue.js app as any other JavaScript code.
159+ Twig templates can instantiate a Vue.js app in the same way as any other
160+ JavaScript code. However, given that both Twig and Vue.js use the same delimiters
161+ for variables, you should configure the ``delimiters `` Vue.js option to change
162+ the default variable delimiters.
161163
162- .. tip ::
164+ If you set for example ``delimiters: ['${', '}$'] ``, then you can use the
165+ following in your Twig templates:
163166
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-
168167 .. code-block :: twig
169-
170- {{ twig_var }} renders a Twig variable
171- ${ vuejs_var }$ renders a Vue.js variable
172168
169+ {{ twig_variable }} {# renders a Twig variable #}
170+ ${ vuejs_variable }$ {# renders a Vue.js variable #}
173171
174172 .. _`Vue.js` : https://vuejs.org/
175173.. _`vue-loader options` : https://vue-loader.vuejs.org/options.html
You can’t perform that action at this time.
0 commit comments