diff --git a/frontend.rst b/frontend.rst index f9f72d007c8..c43a1288245 100644 --- a/frontend.rst +++ b/frontend.rst @@ -40,6 +40,7 @@ Adding more Features * :doc:`CSS Preprocessors: Sass, LESS, etc ` * :doc:`PostCSS and autoprefixing ` * :doc:`Enabling React.js ` +* :doc:`Enabling Vue.js (vue-loader) ` * :doc:`Configuring Babel ` * :doc:`Source maps ` diff --git a/frontend/encore/dev-server.rst b/frontend/encore/dev-server.rst index 5ded6cca2d4..3dc0604885b 100644 --- a/frontend/encore/dev-server.rst +++ b/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 `, 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/ diff --git a/frontend/encore/vuejs.rst b/frontend/encore/vuejs.rst new file mode 100644 index 00000000000..c528d199b08 --- /dev/null +++ b/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