File tree 3 files changed +57
-2
lines changed
3 files changed +57
-2
lines changed Original file line number Diff line number Diff line change @@ -40,6 +40,7 @@ Adding more Features
40
40
* :doc: `CSS Preprocessors: Sass, LESS, etc </frontend/encore/css-preprocessors >`
41
41
* :doc: `PostCSS and autoprefixing </frontend/encore/postcss >`
42
42
* :doc: `Enabling React.js </frontend/encore/reactjs >`
43
+ * :doc: `Enabling Vue.js (vue-loader) </frontend/encore/vuejs >`
43
44
* :doc: `Configuring Babel </frontend/encore/babel >`
44
45
* :doc: `Source maps </frontend/encore/sourcemaps >`
45
46
Original file line number Diff line number Diff line change @@ -24,8 +24,18 @@ by the normal `webpack-dev-server`_. For example:
24
24
25
25
This will start a server at ``https://localhost:9000 ``.
26
26
27
- .. note ::
27
+ Hot Module Replace HMR
28
+ ----------------------
28
29
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.
30
39
31
40
.. _`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