Vue.js Meetup Korea : Vue-tiful Korea 발표자료입니다

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