This document discusses the benefits of using Nuxt, an open-source framework for building Vue.js applications. Nuxt handles common tasks like routing, server-side rendering, hot reloading and bundling without needing additional configuration files. It allows developers to write code once that runs on both the server and client through isomorphic JavaScript. Nuxt also uses Vue as a templating engine and supports features like tree shaking to reduce bundle sizes.

3. = ::

4. – Evan You
“Integrating with Nuxt is the full package. It’s like more complete.”

5. Web Development Nowadays
• Component, Container, Store
• SSR (Server-Side Rendering)
• Router w/ History API
• Latest ECMAScript
• Hot Module Reloading
• SASS
• ...

6. No more…
• webpack.config.js
• gulpfile.js
• .babelrc
• ...

7. No more…
• webpack.config.js
• gulpfile.js
• .babelrc
• ...

8. Only Nuxt
$ npm install nuxt

9. Only Nuxt
$ npm install nuxt

10. Only Nuxt
$ npm install nuxt

11. Isomorphic JavaScript
Isomorphic JavaScript Code

12. Isomorphic JavaScript
Isomorphic JavaScript Code
Front-end Script

13. Isomorphic JavaScript
Isomorphic JavaScript Code
Web ServerFront-end Script

14. Vue as Template Engine
• <% %>
• <%= %>
• <%# %>
• <% -%>
• {% extends %}
• {% if %}
• {% elif %}
• {% for in %}

15. Vue as Template Engine
• <% %>
• <%= %>
• <%# %>
• <% -%>
index.vue
• {% extends %}
• {% if %}
• {% elif %}
• {% for in %}

16. Caveat

17. Different Context
• window
• document
• $
• localStorage
• ...
• process
• global
• module
• require(‘path’)
• ...

18. Tree Shaking
import _ from ‘lodash’

19. Tree Shaking
import _ from ‘lodash’ 540 KB

20. Tree Shaking
import _ from ‘lodash’ 540 KB
import _map from ‘lodash/map’

21. Tree Shaking
import _ from ‘lodash’ 540 KB
import _map from ‘lodash/map’ 2 KB

22. Demonstration