Next version of WOUDC UI using Nuxt and VueJS.

• Install NodeJS

• Create a copy of the .env.sample file and rename to .env

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project: https://nuxtjs.org/guide#static-generated-pre-rendering-
$ npm run generate

For detailed explanation on how things work, check out Nuxt.js docs.

This project includes a .env.sample file. You must rename the file to .env and fill in your environment variables so that Nuxt will load it in by default. If you don't rename or you want to have multiple .env files, you must configure the options of the dotenv-module module within the nuxt.config.js file to match the correct .env file accordingly.

Linting is incorporated when running npm run dev and when you git commit.

Your code can be linted by running npm run lint to check for validation. You can also run npm run lintfix to apply corrections where it can to your code.

Vuetify was chosen for the styling and theme, which applies the Material design specification. UI components from Vuetify should be used for any user interactable components. Some of the UI components have nuxt support (ie. for routing).

SEO is handled by Nuxt in the head() method.

In addition, Microdata is incorporated to give further context to individual pages (ie. including html attributes itemscope, itemprop, itemtype). To validate your Microdata, use Google's structured data testing tool; using "View page source" of your page, and copying and pasting into the code snippet.

Translation of SEO text is handled by nuxt-i18n. Please see the nuxt-i18n SEO guide on how it works and other configuration.

The i18n framework is configured with nuxt-i18n and is integrated with vue-i18n.

Please see the nuxt-i18n routing guide.

To translate text, use BabelEdit and load the .babel file in the root of the project. If there are new .vue components, they need to be added in (by file or by folder). If translation needs to be sent to a 3rd party translator, BabelEdit can export the translation to a CSV which can be sent off to the translator. Once completed, import the CSV in to BabelEdit to apply the completed translations.

Unit testing is done using Jest and can be run by the command: npm run test.

Please see the guide on testing single file components with Jest.

Tip: Don't write unit test for every single case. Instead, the next time you get an error in your development, write a unit test in the /test folder to help validate your code.