feature #8101 [Encore] Documenting vuejs support (weaverryan)

This PR was squashed before being merged into the 3.3 branch (closes #8101).

Discussion
----------

[Encore] Documenting vuejs support

Closes #8099

Cheers!

Commits
-------

5c5938f Adding note about configuring options
872bf93 adding vuejs document

Author: weaverryan

frontend.rst

@@ -40,6 +40,7 @@ Adding more Features
 * :doc:`CSS Preprocessors: Sass, LESS, etc </frontend/encore/css-preprocessors>`
 * :doc:`PostCSS and autoprefixing </frontend/encore/postcss>`
 * :doc:`Enabling React.js </frontend/encore/reactjs>`
+* :doc:`Enabling Vue.js (vue-loader) </frontend/encore/vuejs>`
 * :doc:`Configuring Babel </frontend/encore/babel>`
 * :doc:`Source maps </frontend/encore/sourcemaps>`
 

frontend/encore/dev-server.rst

@@ -24,8 +24,18 @@ by the normal `webpack-dev-server`_. For example:
 
 This will start a server at ``https://localhost:9000``.
 
-.. note::
+Hot Module Replacement HMR
+--------------------------
 
-    Hot module replacement is not currently supported.
+Encore *does* support `HMR`_, but only in some areas. To activate it, pass the ``--hot``
+option:
+
+.. code-block:: terminal
+
+    $ ./node_modules/.bin/encore dev-server --hot
+
+HMR currently works for :doc:`Vue.js </frontend/encore/vuejs>`, but does *not* work
+for styles anywhere at this time.
 
 .. _`webpack-dev-server`: https://webpack.js.org/configuration/dev-server/
+.. _`HMR`: https://webpack.js.org/concepts/hot-module-replacement/

frontend/encore/vuejs.rst

@@ -0,0 +1,56 @@
+Enabling Vue.js (vue-loader)
+============================
+
+Want to use `Vue.js`_? No problem! First, install Vue and some dependencies:
+
+.. code-block:: terminal
+
+    $ yarn add --dev vue vue-loader vue-template-compiler
+
+Then, activate the ``vue-loader`` in ``webpack.config.js``:
+
+.. code-block:: diff
+
+    // webpack.config.js
+    // ...
+
+    Encore
+        // ...
+        .addEntry('main', './assets/main.js')
+
+    +     .enableVueLoader()
+    ;
+
+That's it! Any ``.vue`` files that you require will be processed correctly. You can
+also configure the `vue-loader options`_ via a callback:
+
+.. code-block:: javascript
+
+    .enableVueLoader(function(options) {
+        // https://vue-loader.vuejs.org/en/configurations/advanced.html
+
+        options.preLoaders = {
+            js: '/path/to/custom/loader'
+        };
+    });
+
+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, just use the
+``dev-server`` with the ``--hot`` option:
+
+.. code-block:: terminal
+
+    $ ./node_modules/.bin/encore dev-server --hot
+
+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 :doc:`/frontend/encore/dev-server` for more details.
+
+.. _`babel-preset-react`: https://babeljs.io/docs/plugins/preset-react/
+.. _`Vue.js`: https://vuejs.org/
+.. _`vue-loader options`: https://vue-loader.vuejs.org/en/configurations/advanced.html