Nuxt.js example

This repository will help you to start with Nuxt.js.

Core principles:

Server Side Rendering
AntDesign (like Bootstrap or Material)
Auth0
I18n (translations)
Errors handling
Tests (TU & E2E)
SEO
Common plugins (lodash, vee-validate, vee-lazyload)

Feel free copy/paste code from this repository. It's MIT licenced.

Don't start your projects from it, prefer create-nuxt-app, it's a great tool!

Build Setup

Add an env file

This repository uses .env files for configuration. Copy paste the following lines in a file named .env in the root directory.

BASE_URL=http://realworld.nuxtjs.com:3333

# Auth0
AUTH0_DOMAIN=# Example: nuxt-js.eu.auth0.com
AUTH0_CLIENT_ID=# Example: gI6lVM0y2HqwgBI5ujO9YmGyt4y3yPhU

Auth0 (facultative)

First, create a tenant at Auth0. Then, create an application (Regular Web Application) and specify AUTH_* environment variables in .env file.

More info here about the application configuration.

Define local dns (facultative)

Add the local dns realworld.nuxtjs.com.

$ sudo vi /etc/hosts

Example: 127.0.0.1 localhost realworld.nuxtjs.com

If you want to change the local dns name, don't forget to edit BASE_URL environment variable in .env file.

Time to launch mate!

# install dependencies
$ yarn

# serve with hot reload at localhost:3333
$ yarn dev

# build for production and launch server
$ yarn build && yarn start

You can access the project locally at : localhost:3333 or realworld.nuxtjs.com:3333 if you defined the local dns.

Used dependencies

Nuxt.js: the intuitive vue framework. In this repo, used with SSR and to connect express as a server middleware.
Nuxt i18n: i18n for your Nuxt project (translations).
Nuxt Axios module: secure and Easy Axios integration with Nuxt.js.
Nuxt Auth module (Auth0 config): Zero-boilerplate authentication support for Nuxt.js.
Nuxt Dotenv module: loads your .env file into your application context.
Nuxt Toast module: responsive Touch Compatible Toast plugin for Nuxt.js using vue-toasted.
Nuxt Component Cache module: vue-server-renderer has built-in support for component-level caching. This module automatically adds a LRU cache to project.
Nuxt Device module: injects flags that indicate a device type into the context and the component instance.
Nuxt Sitemap module: automatically generate or serve dynamic sitemap.xml for Nuxt.js projects.
Nuxt Robots.txt module: a Nuxt.js module thats inject a middleware to generate a robots.txt file.
Vue Vee Validate module: template based form validation framework for vue.js.
Vue Cookie Law module: EU Cookie Law Plugin for Vue.js.
Vue lazyloading module: vue module for lazyloading images in your applications.
Vue loadash module: a small wrapper for integrating lodash to Vuejs.
Nuxt Style Resources module: share variables, mixins, functions across all style files (no @import needed).
sass-loader: loads a Sass/SCSS file and compiles it to CSS.
node-sass: node.js bindings to libsass.
Cypress - E2E
Jest - UT

Dependencies configuration

robots.txt

Two possible configurations are implemented in this repo: with the robots.txt module and with static files.

Static files config: all included files are automatically served by Nuxt and are accessible through your project root URL. (static/robots.txt will be available at localhost:3000/robots.txt).

Nuxt Robots.txt module: inject a middleware to generate a robots.txt file. The JS translation of static/robots.txt file is available in config/modules/robots.js.

In both cases, if you do not use a sitemap, don't forget to remove it from the robots.txt.

Awesome repositories

To find nice dependencies, don't forget to check these repositories:

Awesome Nuxt.js: a curated list of awesome things related to Nuxt.js.
Nuxt Community: modules & Projects from Nuxt.js Community.
Awesome Vue.js: a curated list of awesome things related to Vue.js.
Awesome Express: a curated list of express.js resources.
Awesome Node.js: delightful Node.js packages and resources.

License

MIT License

r9mp/realworld-nuxtjs