Enabling Vue.js (vue-loader) ¶

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.

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>
        )
    }
}

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
}

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 #}