Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
A minimalist framework
for server-rendered Vue.js applications
Inspired by Next.js
Built on top of Vue.js 2
Server-side Rendering
With Node.js
ES6 Transpilation
With Babel
Code Splitting
With Webpack
Focus on writing
*.vue files
Example
npm install --save nuxt
pages/index.vue
<template>
<h1>Hello {{ name }}</h1>
</template>
<script>
export default {
data () {
return { name: ‘dotJS...
nuxt
http://localhost:3000
<h1>Hello dotJS</h1>
pages/ is the main API
pages/index.vue —> /
pages/about.vue —> /about
Customisable
nuxt.config.js
Custom Routes
Ex: /users/:id -> pages/_user.vue
Vue plugins
Ex: vuelidate, vue-i18n, etc.
Head elements
title, meta tags, etc.
Vuex Store
With store/index.js
Layouts
pages/_app.vue
Etc.
Use it
Programmatically
Express Middleware
app.use(nuxt.render)
Server Deployment
nuxt build && nuxt start
Serverless Deployment
nuxt generate
pages/index.vue —> /index.html
pages/about.vue —> /about/index.html
nuxtjs.org
Chopin brothers
Made with nuxt.js
Nuxt.js - Universal Vue.js Applications
Upcoming SlideShare
Loading in …5
×

Nuxt.js - Universal Vue.js Applications

250 views

Published on

Nuxt.js is a minimalist framework for creating server-rendered applications made with Vue.js. It can be used to create static website as well (server rendered at build time).
https://nuxtjs.org

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Nuxt.js - Universal Vue.js Applications

  1. 1. A minimalist framework for server-rendered Vue.js applications Inspired by Next.js
  2. 2. Built on top of Vue.js 2
  3. 3. Server-side Rendering With Node.js
  4. 4. ES6 Transpilation With Babel
  5. 5. Code Splitting With Webpack
  6. 6. Focus on writing
  7. 7. *.vue files
  8. 8. Example
  9. 9. npm install --save nuxt
  10. 10. pages/index.vue <template> <h1>Hello {{ name }}</h1> </template> <script> export default { data () { return { name: ‘dotJS’ } } } </script>
  11. 11. nuxt
  12. 12. http://localhost:3000
  13. 13. <h1>Hello dotJS</h1>
  14. 14. pages/ is the main API
  15. 15. pages/index.vue —> / pages/about.vue —> /about
  16. 16. Customisable nuxt.config.js
  17. 17. Custom Routes Ex: /users/:id -> pages/_user.vue
  18. 18. Vue plugins Ex: vuelidate, vue-i18n, etc.
  19. 19. Head elements title, meta tags, etc.
  20. 20. Vuex Store With store/index.js
  21. 21. Layouts pages/_app.vue
  22. 22. Etc.
  23. 23. Use it Programmatically
  24. 24. Express Middleware app.use(nuxt.render)
  25. 25. Server Deployment nuxt build && nuxt start
  26. 26. Serverless Deployment nuxt generate
  27. 27. pages/index.vue —> /index.html pages/about.vue —> /about/index.html
  28. 28. nuxtjs.org Chopin brothers Made with nuxt.js

×