Skip to content
  • About
    • What is Symfony?
    • Community
    • News
    • Contributing
    • Support
  • Documentation
    • Symfony Docs
    • Symfony Book
    • Screencasts
    • Symfony Bundles
    • Symfony Cloud
    • Training
  • Services
    • SensioLabs Professional services to help you with Symfony
    • Platform.sh for Symfony Best platform to deploy Symfony apps
    • SymfonyInsight Automatic quality checks for your apps
    • Symfony Certification Prove your knowledge and boost your career
    • Blackfire Profile and monitor performance of your apps
  • Other
  • Blog
  • Download
sponsored by SensioLabs
  1. Home
  2. Documentation
  3. Frontend
  4. Enabling Vue.js (vue-loader)
  • Documentation
  • Book
  • Reference
  • Bundles
  • Cloud

Table of Contents

  • Runtime Compiler Build
  • Hot Module Replacement (HMR)
  • JSX Support
    • Using styles
    • Using Scoped Styles
    • Using images
  • Using Vue inside Twig templates

Enabling Vue.js (vue-loader)

Edit this page

Enabling Vue.js (vue-loader)

Screencast

Do you prefer video tutorials? Check out the Vue screencast series.

Tip

Check out live demos of Symfony UX Vue.js component at https://ux.symfony.com/vue!

Want to use Vue.js? No problem! First enable it in webpack.config.js:

1
2
3
4
5
6
7
8
9
// webpack.config.js
  // ...

  Encore
      // ...
      .addEntry('main', './assets/main.js')

+     .enableVueLoader()
  ;

Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you're done!

Any .vue files that you require will be processed correctly. You can also configure the vue-loader options by passing an options callback to enableVueLoader(). See the Encore's index.js file for detailed documentation.

Runtime Compiler Build

By default, Encore uses a Vue "build" that allows you to compile templates at runtime. This means that you can do either of these:

1
2
3
4
5
6
7
new Vue({
    template: '<div>{{ hi }}</div>'
})

new Vue({
    el: '#app', // where <div id="app"> in your DOM contains the Vue template
});

If you do not need this functionality (e.g. you use single file components), then you can tell Encore to create a smaller build following Content Security Policy:

1
2
3
4
5
6
7
8
// webpack.config.js
// ...

Encore
    // ...

    .enableVueLoader(() => {}, { runtimeCompilerBuild: false })
;

You can also silence the recommendation by passing runtimeCompilerBuild: true.

Hot Module Replacement (HMR)

The vue-loader supports hot module replacement: just update your code and watch your Vue.js app update without a browser refresh! To activate it, use the dev-server:

1
2
3
4
5
# if you use the Yarn package manager
$ yarn encore dev-server

# if you use the npm package manager
$ npm run dev-server

That's it! Change one of your .vue files and watch your browser update. But note: this does not currently work for style changes in a .vue file. Seeing updated styles still requires a page refresh.

See Using webpack-dev-server and HMR for more details.

JSX Support

You can enable JSX with Vue.js by configuring the second parameter of the .enableVueLoader() method:

1
2
3
4
5
6
7
8
9
10
11
12
// webpack.config.js
  // ...

  Encore
      // ...
      .addEntry('main', './assets/main.js')

-     .enableVueLoader()
+     .enableVueLoader(() => {}, {
+         useJsx: true
+     })
  ;

Next, run or restart Encore. When you do, you will see an error message helping you install any missing dependencies. After running that command and restarting Encore, you're done!

Your .jsx files will now be transformed through @vue/babel-preset-jsx.

Using styles

You can't use <style> in .jsx files. As a workaround, you can import .css, .scss, etc. files manually:

1
2
3
4
5
6
7
8
9
10
11
12
13
// App.jsx
import './App.css'

export default {
    name: 'App',
    render() {
        return (
            <div>
                ...
            </div>
        )
    }
}

Note

Importing styles this way makes them global. See the next section for scoping them to your component.

Using Scoped Styles

You can't use Scoped Styles (<style scoped>) either in .jsx files. As a workaround, you can use CSS Modules by suffixing import paths with ?module:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Component.jsx
import styles from './Component.css?module' // suffix with "?module"

export default {
    name: 'Component',
    render() {
        return (
            <div>
                <h1 class={styles.title}>
                    Hello World
                </h1>
            </div>
        )
    }
}
1
2
3
4
5
/* Component.css */

.title {
    color: red
}

The output will be something like <h1 class="title_a3dKp">Hello World</h1>.

Using images

You can't use <img src="./image.png"> in .jsx files. As a workaround, you can import them with require() function:

1
2
3
4
5
6
7
8
9
10
export default {
    name: 'Component',
    render() {
        return (
            <div>
                <img src={require("./image.png")}/>
            </div>
        )
    }
}

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:

1
2
{{ twig_variable }}   {# renders a Twig variable #}
${ vuejs_variable }$  {# renders a Vue.js variable #}
This work, including the code samples, is licensed under a Creative Commons BY-SA 3.0 license.
TOC
    Version
    We stand with Ukraine.
    Version:

    Symfony 6.3 is backed by

    Symfony 6.3 is backed by

    Symfony 6.3 is backed by

    Symfony 6.3 is backed by

    Get your Sylius expertise recognized

    Get your Sylius expertise recognized

    Peruse our complete Symfony & PHP solutions catalog for your web development needs.

    Peruse our complete Symfony & PHP solutions catalog for your web development needs.

    Symfony footer

    ↓ Our footer now uses the colors of the Ukrainian flag because Symfony stands with the people of Ukraine.

    Avatar of Alexey Berezuev, a Symfony contributor

    Thanks Alexey Berezuev for being a Symfony contributor

    2 commits • 4 lines changed

    View all contributors that help us make Symfony

    Become a Symfony contributor

    Be an active part of the community and contribute ideas, code and bug fixes. Both experts and newcomers are welcome.

    Learn how to contribute

    Symfony™ is a trademark of Symfony SAS. All rights reserved.

    • What is Symfony?

      • Symfony at a Glance
      • Symfony Components
      • Case Studies
      • Symfony Releases
      • Security Policy
      • Logo & Screenshots
      • Trademark & Licenses
      • symfony1 Legacy
    • Learn Symfony

      • Symfony Docs
      • Symfony Book
      • Reference
      • Bundles
      • Best Practices
      • Training
      • eLearning Platform
      • Certification
    • Screencasts

      • Learn Symfony
      • Learn PHP
      • Learn JavaScript
      • Learn Drupal
      • Learn RESTful APIs
    • Community

      • SymfonyConnect
      • Support
      • How to be Involved
      • Code of Conduct
      • Events & Meetups
      • Projects using Symfony
      • Downloads Stats
      • Contributors
      • Backers
    • Blog

      • Events & Meetups
      • A week of symfony
      • Case studies
      • Cloud
      • Community
      • Conferences
      • Diversity
      • Documentation
      • Living on the edge
      • Releases
      • Security Advisories
      • SymfonyInsight
      • Twig
      • SensioLabs
    • Services

      • SensioLabs services
      • Train developers
      • Manage your project quality
      • Improve your project performance
      • Host Symfony projects

      Deployed on

    Follow Symfony

    Search by Algolia