VoV 084: Nuxt.JS With Sebastien Chopin




Views on Vue show

Summary: <p dir="ltr"><strong>Sebastien Chopin is a front end developer who works mostly in JavaScript and is the creator of Nuxt.JS, a framework based off of Vue. Nuxt started as a JavaScript framework for application rendering and today it can be used to create any kind of application. One advantage of using Nuxt with Vue comes in with server side rendering. Even though a user can use Vue for server side rendering, they will need the use of outside modules where using Nuxt will help them to get started quicker. </strong></p> <p dir="ltr"><strong>After the Views on Vue panelists discuss the usage of Nuxt in server side rendering, Ari asks Sebastien to elaborate on how Nuxt can be used outside of server side rendering. Sebastien describes how Nuxt has a pages system that helps streamline the directory and folder structure of an application or web page. Nuxt also has features to help with navigation among other usages described by Sebastien. He also goes into further detail about the features of the pages system. The panel then covers Vuex and using Vuex to perform asynchronous operations, as well as how Nuxt streamlines this process.</strong></p> <p dir="ltr"><strong>The next topic covered by the panelists is vue page transitions and how they work in Nuxt. Sebastien talks about how Nuxt uses components and modes to manage transitions and how to modify the page’s CSS appropriately. Ari then asks Sebastien what other features come with Nuxt out of the box in addition to transitions. Sebastien goes on to share these features that include the following: transitions, pages transition, templating, app customization, and browser comments. The panelists discuss the plugin ecosystem included with Nuxt. </strong></p> <p dir="ltr"><strong>The next topic covered by the Vue experts is the use of plugins and modules as well as some of the markdown centered authoring in Nuxt. Ben asks Sebastien if a markdown compiler would need to be a plugin or a module and how it would work. Sebastien explains that a user could use markdown by using a webpack loader and how to use modules to support it. Ari ask Sebastien to expound upon how Nuxt enables a quality developer experience when building static sites on a JAMstack. In response to this, Sebastien shares a story about when his brother joined him to work on the first edition of Nuxt. Together they used a generator command to read the pages directory and Sebastien shares the effect that had. </strong></p> <p dir="ltr"><strong>The panelists then move on to discussing the future of Nuxt and upcoming releases. Sebastien talks about his plans for the upcoming changes to NuxtJS.org and full static mode as well as other upcoming features. The panelists also discuss CircleCI and GitlabCI as well as other git tooling. Ari asks Sebastien what he does when he has spare time. Sebastien likes to browse twitter which he uses as his feed to keep up on what’s happening in open source. He also likes to keep current on the Javascript and Vue worlds. They also talk about the upcoming Nuxt projects that Sebastien is excited about. They wrap up with talking about social media in the community and how to get involved with NuxtJs.</strong></p> <p> </p> <p dir="ltr"><strong>Panelists</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong>Ben Hong</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong>Ari Clark</strong></p> </li> </ul> <p> </p> <p dir="ltr"><strong>Guest</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong>Sebastien Chopin</strong></p> </li> </ul> <p dir="ltr"><strong>Sponsors</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://tidelift.com/">Tidelift</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://sentry.io/">Sentry</a> use code “devchat” for two months free</strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://devchat.tv/js-jabber/">JavaScript Jabber</a></strong></p> </li> </ul> <p dir="ltr"><strong>Links</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://nuxtjs.org/">Nuxt.JS</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://nuxt.press/">NuxtPress</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://vuex.vuejs.org/">Vuex</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://webpack.js.org/loaders/">Webpack Loaders</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/marinaaisa/nuxt-markdown-blog-starter">Nuxt + Markdown blog starter</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://jamstack.org/">JAMstack</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://api.chucknorris.io/">Chuck Norris Database</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://circleci.com/pricing/?utm_source=gb&amp;utm_medium=SEM&amp;utm_campaign=SEM-gb-200-Eng-ni&amp;utm_content=SEM-gb-200-Eng-ni-Circle-CI&amp;gclid=Cj0KCQjw_5rtBRDxARIsAJfxvYDYMvcz90KZ3OFRKXYQOSbtcZNjxS7EBd--13hoN_-QADxUdUkElgYaAu8iEALw_wcB">CircleCI</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.instagram.com/nuxt_js/?hl=en">NuxtJS Instagram</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="http://discord.nuxtjs.org">NuxtJS Discord Server</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/nuxt">NuxtJS Github</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://twitter.com/atinux?lang=en">Sebastien Chopin Twitter</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/Atinux">Atinux github</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://atinux.com/">Atinux.com</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://vuejs.amsterdam/">Vue.js Conference Amsterdam</a></strong></p> </li> </ul> <p dir="ltr"><strong>Picks</strong></p> <p dir="ltr"><strong>Ari Clark</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.imdb.com/title/tt3609352/">Grace and Frankie</a></strong></p> </li> </ul> <p dir="ltr"><strong>Sebastien Chopin</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="http://www.thylacinemusic.com/">Thylacine</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.imdb.com/title/tt0108778/">Friends</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/vuejs/vuepress/releases/tag/v1.1.0">Vuepress 1.1</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://github.com/gridsome/gridsome">Gridsome 0.7</a></strong></p> </li> </ul> <p dir="ltr"><strong>Ben Hong</strong></p> <ul> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.youtube.com/watch?v=pmanD_s7G3U">Gurenge by LiSA</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.crunchyroll.com/demon-slayer-kimetsu-no-yaiba">Demon Slayer: Kimetsu no Yaiba</a></strong></p> </li> <li dir="ltr"> <p dir="ltr"><strong><a href="https://www.amazon.com/Super-Pumped-Battle-Mike-Isaac/dp/0393652246">Super Pumped</a></strong></p> </li> </ul>