1905223

My first formal look at NuxtJS was to work through the Traversy video titled “Nuxt JS Crash Course.” Brad Traversy began by summarizing what NuxtJS is and its advantages, then went on to show how it’s used by building a small application that displayed jokes from a website via axios calls, including a text search form. The project name for the application was dadjokes.

What is NuxtJS? It’s a framework that offers server-side rendering for Vue applications, similar to NextJS for React. Its main advantages include

• Universal apps and server-side rendering
• SEO optimization
• Control over HEAD, TITLE, META tags for pages
• Simple page routing
• Bundling with vue-router, Vuex, vue-meta and more
• Presents a choice of building universal or single page app
• Choice of using Express or other backend framework
• Choice of using Bootstrap or other UI framework
• Automatic code-splitting, Babel transpile, SASS integration
• Easy build nuxt generate command that also creates a dist directory for deployment

Apart from the highlighted features discussed below, most time was spent writing VueJS code in the course of the video. As I was using Sublime Text, I created a snippet for inserting skeleton code necessary for new .vue files. The course did not include building or deploying the finished project, which I later explored myself at the nuxtjs.org website.

1. Starting a project

npx create-nuxt-app dadjokes was typed in a command window to create the project directory (dadjokes) and then populate it with the necessary files mostly downloaded from the web. This is one way to install NuxtJS. The project directory is created wherever you may be in the file system, so it’s necessary to first move to the right place before typing the command. At the start, the following project options were requested: Project name and description, custom server framework, selection of popular modules such as axios and express, custom UI framework such as Bootstrap, custom testing framework, rendering mode (universal or single page application), author name, package manager such as npm. The actual prompts (and responses) presented were as follows:

? Project name dadjokes
? Project description Lists bad dad jokes
? Use a custom server framework none
? Choose features to install Axios
? Use a custom UI framework none
? Use a custom test framework none
? Choose rendering mode Universal
? Author name My Self
? Choose a package manager npm

At the end, the resulting project directory included 9 subdirectories (assets, components, layouts, middleware, node_modules, pages, plugins, static, store) and 6 files (nuxt.config.js, package-lock.json, .gitignore, .editorconfig, package.json, README.md).

To get started with development npm run dev is typed in the project directory. This starts the (skeleton) application on port 3000 of localhost web server. If successful the following displays:

To see the application you would browse to the URL http://localhost:3000. At the end of the development work, to build and start the application for production or live use, npm run build may be used. The build process needs web access to succeed.

2. Directory management

Certain directories serve certain purposes only. The directories modified in the course of building the dadjokes project were components (three new components created), layouts (its default.vue file was modified to reflect the page structure for the application, like positioning of page header and menu), and pages (its index.vue that serves as the home page was modified and another about.vue created as well as a jokes directory with its own index.vue and _id subdirectory with its own index.vue). Simple routing is implemented automatically, based on the structure of the pages directory. For instance once jokes was created under it, with its own index.vue, the URL localhost:3000/ renders the pages/index.vue component, localhost:3000/jokes renders pages/jokes/index.vue and localhost:3000/about renders the pages/about.vue without further routing specification.

Because nodemon was activated automatically, compile of the code (from .vue to .js mostly) takes place automatically once any file in these directories is saved after editing.

3. Specifying links

<nuxt-link to='/about'>About</nuxt-link> Relative links like this will be to files in the pages directory, in this case pages/about.vue. For our practice application, a simple menu was set up with three options Home, Jokes and About.

4. Global styling

With each component being a .vue file that could have its own <style> tag, global styling for the application was done in the layouts/default.vue component.

5. Parameterized URLs

To implement a URL like localhost:3000/jokes/xxx where xxx represents the ID for a given joke, a directory jokes/_id was created and given its own index.vue file. This came into play to display everything about a specific joke on its own window.

6. Page HEAD tagging for SEO

Each .vue file in the pages directory that needs <head> tags such as page title is given a head() method in the <script> section, which like data() simply returns an object with different attributes such as title (page title string) and meta, an array of different META tags, like page description.