Nuxt Talk

Editor's Notes

• #2: Hello everyone. [CLICK] My name is Sebastien, I am French, sorry for my accent 😄, I am currently working at Neo 9 in Paris.
• #3: Today I am going to talk about Nuxt.js, first, what is Nuxt.js?
• #4: Nuxt.js is an open-source project and it's a framework for server-rendered Vue.js applications. [CLICK] It’s inspired by Next.js
• #5: It is built on top of Vue.js 2.1 and the latest version of Vue-router
• #6: One of it’s main feature is to allow your application to be server rendered without any extra setup.
• #7: You can write ES6 in your code. [CLICK] Nuxt.js uses Babel to transpile your code and make it work for most of the platforms.
• #8: Nuxt.js uses Webpack to split your application into multiple file. When the browser load your application, only the strict minimum of JavaScript and CSS will be sent back. [CLICK] You don’t have to do anything, it’s automatic for every routes and layouts.
• #9: Nuxt.js also provides hot reloading [CLICK] thanks to Webpack and Vue Loader to improves your development experience.
• #10: The only thing you have to do is to focus on writing VUE files.
• #11: Let’s see a quick how to use Nuxt.js
• #12: First, we need to install nuxt as a dependency of our application with npm
• #13: We can add a “dev" script in our package.json to launch nuxt.js.
• #14: And then we can create our first page. Here we have a template displaying the name property of our page data, and we set the name to world.
• #15: I can now launch Nuxt with npm run dev
• #16: Nuxt will generate the routes, bundle your files and run a server on localhost.
• #17: If we visit this url in the browser, we can see our index.vue page server-rendered.
• #18: Let’s see how it looks like in live.
• #19: Let’s see how the routing works in Nuxt
• #20: Nuxt.js will match every vue file in our pages directory to a route in our server
• #21: [CLICK] So for our index.vue page, it will be the slash route, [CLICK] and for about.vue, the /about route
• #22: We can also create dynamic routes, just prefix your route by an underscore to become a dynamic route. [CLICK] The name of file will become a parameter of the route. [CLICK] If you create a page with only an underscore, it will be a wildcard route.
• #23: We pushed the routing concept to supports nested routes.[CLICK] By having a directory with the same name of a file, it opens the possibility to create child routes.[CLICK] The will be rendered only when the url will match its path.
• #24: To navigate between the pages, we added a component called nuxt-link
• #25: This is how it looks like to create a link
• #26: To navigate to the about page, We add the to attribute. [CLICK] It’s usage is the same as router-link since we use vue-router under the hood
• #27: Supports async/await
• #28: Every web application needs to make API calls which are asynchronous. That’s why, like next.js, we added a hook in the pages component to handle this issue.
• #29: Let’s start with a simple template
• #30: We display a list of posts by showing the title of every post
• #31: We now add our list of posts in our data hook. But this is not asynchronous
• #32: First, let's rename our data method to asyncData
• #33: We also add the async keyword to use await inside since Nuxt transpiles ES6
• #34: We need to import axios to make an API call. Axios lets us make HTTP request to both client-side and server-side with the same api.
• #35: We can now fetch our API to get the list of posts and display it.
• #36: Let’s see how it looks like
• #37: Nuxt passes a context object to the asyncData method which helps to in many ways
• #38: First, we have some helpers like isClient, isServer and isDev which are boolean and guide you to know where the method is run. We have the env property that you can define in the config file.
• #39: Then we have the route property, which is an instance of vue-router, params and query if you want to get informations from the current url. We also have store, but we will see this property later.
• #40: To finish, we have our 2 properties from our node.js server, only available when we render the page from the server of course. And 2 methods, one to redirect to another page and error to display the error page.
• #41: Let’s see an example, I want a page to display the current user agent, this is how I can do it in nuxt, if req is available, so I’m on the server, I get it from the headers, otherwise I get it from the navigator object available on client-side.
• #42: We added a Layout concept in Nuxt
• #43: First, we create a layouts directory in our application
• #44: We can change the default layout for every page by creating a default.vue component. We simply add the nuxt component to render our current page.
• #45: Let’s create a custom layout called dark.vue which encapsulate our page in a container with the dark-mode class.
• #46: Then, I can tell for a specific page which layout I want to use with the layout property.
• #47: Let’s see a quick example.
• #48: Every big application needs a global state for every pages. So we added the store concept [CLICK] based on VUEX.
• #49: We add a store directory first.
• #50: Then we simply export a state object, here with a count property at 0. [CLICK] Now let’s display the count property in our index page. [CLICK] And also in our about page.
• #51: We now add a mutation to increment our count property. [CLICK] We update our about page to add a button which call the increment mutation every time we click on it. [CLICK]
• #52: Let’s see how it looks like on now.
• #53: We added a special action called nuxt server init which is called by the server before rendering the application. It may useful to store the connected user or fetch some global data and make it available on client-side directly.
• #54: Another concept, but for me pretty useful, is the middleware.
• #55: Same philosophy, we add a middleware directory.
• #56: A middleware is only a method which receive the context and can be asynchronous. Here we simply check our user is connected, otherwise we redirect the user to the login page.
• #57: In the page we want to display only to connected user, we add the middleware property and give our auth middleware.
• #58: This is a schema to represent what’s happening on an incoming request. The nuxtServerInit is called first if the store is available, then the middleware chain, the validate method that we did not see here, the asyncData & fetch method and then we render our application.
• #59: Let’s see a quick demo!
• #60: Nuxt is fully customisable with a nuxt.config.js file. With this file, we can modify the webpack & babel configuration, add vue plugins and more.
• #61: Head elements are important for any web page, mostly when server-rendered. [CLICK] We use vue-meta to handle this logic via a head property available in the config file, layouts or any pages.
• #62: I believe this example is explicit enough to understand how it works.
• #63: One powerful way of using Nuxt.js is to use it programmatically
• #64: Simply require nuxt, and create a new instance of it by giving it the configuration it needs. The call the build() method and you’re ready to render every route you want.
• #65: Also, you can combine it with express by using it as a middleware.
• #66: Let’s see how we can deploy any nuxt.js application. [CLICK] With now
• #67: We add 2 script, one for building the app for production, we call nuxt build, and the one to start in production mode, called nuxt start.
• #68: Then we go to our terminal, in our app folder, and we launch `now` command. [CLICK] And that’s it, your app is up and running on the cloud.
• #69: Nuxt can also be used as a static generator for your website, that’s actually what we do to serve our documentation on nuxtjs.org. [CLICK] The command is called `nuxt generate`
• #70: You can add a nom script to call `nuxt generate` directly.
• #71: This command will actually server-render every route and save it to an HTML file in a folder structure that correspond to each route. It will also put all of theses files in a dist/ folder.
• #72: Since now can host static website, we can also deploy our static generated web application by running `now dist`. [CLICK] And…that’s it!
• #73: The project is hosted on Github. [CLICK] Right now we are at the version 0.10.6 but we are working on releasing the 1.0 beta pretty soon. [CLICK] We add more than 30 contributors, thank you to all of them. [CLICK] We have 100% of code coverage. [CLICK] More than 500 issues closed, big thanks to our community to help us on theses issues. [CLICK] Also, more than 30 examples to use Nuxt with Vue plugins, Express, Koa, Adonis and more. [CLICK] And all of this, in 6 months.
• #74: We have a documentation website on nuxtjs.org. [CLICK] Right now, it has been translated in 5 different languages, English, Russian, Chineese, Japanese en Koean. [CLICK] We have 2 new languages on their way, French and Spanish. [CLICK] A lot of people from different countries are reading it. [CLICK] And it has been made with NuxtJS.
• #75: I have to thanks a million time my brother, which is the co-author of Nuxt, he came with the static generation feature. He helped me in the vision of Nuxt, and the biggest part: maintaining it! If you have the chance to work with your brother of sister on a project, do it!
• #76: So What’s next apart of the 1.0 release. [CLICK] I would like to introduce the concept of Versatile Web application. It gives you control of what you want to server render or not in your application. [CLICK] It will be a simple property called ssr, default to true. [CLICK] You will be able to set it to false for the whole app. [CLICK] A custom layout, for example the back office. [CLICK] Or a specific page.
• #77: With my brother, we are working on other open source projects that we will announce soon. [CLICK] You can be notified on our website orion.sh, I recommend you to take a look at it.
• #78: Thank you very much for you time!