File tree Expand file tree Collapse file tree 3 files changed +57
-2
lines changed Expand file tree Collapse file tree 3 files changed +57
-2
lines changed Original file line number Diff line number Diff line change @@ -40,6 +40,7 @@ Adding more Features
4040* :doc: `CSS Preprocessors: Sass, LESS, etc </frontend/encore/css-preprocessors >`
4141* :doc: `PostCSS and autoprefixing </frontend/encore/postcss >`
4242* :doc: `Enabling React.js </frontend/encore/reactjs >`
43+ * :doc: `Enabling Vue.js (vue-loader) </frontend/encore/vuejs >`
4344* :doc: `Configuring Babel </frontend/encore/babel >`
4445* :doc: `Source maps </frontend/encore/sourcemaps >`
4546
Original file line number Diff line number Diff line change @@ -24,8 +24,18 @@ by the normal `webpack-dev-server`_. For example:
2424
2525 This will start a server at ``https://localhost:9000 ``.
2626
27- .. note ::
27+ Hot Module Replace HMR
28+ ----------------------
2829
29- Hot module replacement is not currently supported.
30+ Encore *does * support `HMR `_, but only in some areas. To activate it, pass the ``--hot ``
31+ option:
32+
33+ .. code-block :: terminal
34+
35+ $ ./node_modules/.bin/encore dev-server --hot
36+
37+ HMR currently works for :doc: `Vue.js </frontend/encore/vuejs >`, but does *not * work
38+ for styles anywhere at this time.
3039
3140.. _`webpack-dev-server` : https://webpack.js.org/configuration/dev-server/
41+ .. _`HMR` : https://webpack.js.org/concepts/hot-module-replacement/
Original file line number Diff line number Diff line change 1+ Enabling Vue.js (vue-loader)
2+ ============================
3+
4+ Want to use `Vue.js `_? No problem! First, install Vue and some dependencies:
5+
6+ .. code-block :: terminal
7+
8+ $ yarn add --dev vue vue-loader vue-template-compiler
9+
10+ Then, activate the ``vue-loader `` in ``webpack.config.js ``:
11+
12+ .. code-block :: diff
13+
14+ // webpack.config.js
15+ // ...
16+
17+ Encore
18+ // ...
19+ .addEntry('main', './assets/main.js')
20+
21+ + .enableVueLoader()
22+ ;
23+
24+ That's it! Any ``.vue `` files that you require will be processed correctly.
25+
26+ Hot Module Replacement (HMR)
27+ ----------------------------
28+
29+ The ``vue-loader `` supports hot module replacement: just update your code and watch
30+ your Vue.js app update *without * a browser refresh! To activate it, just use the
31+ ``dev-server `` with the ``--hot `` option:
32+
33+ .. code-block :: terminal
34+
35+ $ ./node_modules/.bin/encore dev-server --hot
36+
37+ That's it! Change one of your ``.vue `` files and watch your browser update. But
38+ note: this does *not * currently work for *style * changes in a ``.vue `` file. Seeing
39+ updated styles still requires a page refresh.
40+
41+ See :doc: `/frontend/encore/dev-server ` for more details.
42+
43+ .. _`babel-preset-react` : https://babeljs.io/docs/plugins/preset-react/
44+ .. _`Vue.js` : https://vuejs.org/
You can’t perform that action at this time.
0 commit comments