Link Search Menu Expand Document
Course: Supplementary Technology

Frontend VueJS + Nuxt

Install Node and NPM or Yarn

Follow the instruction below to install npm.

Reference: https://radixweb.com/blog/installing-npm-and-nodejs-on-windows-and-mac

Installation Nuxt

VueJS gets installed with Nuxt

npm init nuxt-app {app_name}

Selections

  • Project name: {your project name}
  • Programming language: JavaScript
  • Package manager: NPM
  • UI framework: Vuetify.js
  • Nuxt.js modules: Axios
  • Linting tools: ESLint
  • Testing framework: None
  • Rendering mode: Single Page App
  • Deployment target: Static (Static/Jamstack hosting)
  • Development tools: No selection
  • What is your GitHub username?
  • Version control system: No selection

Only if needed, install the plugins separately.

vue add vuetify
yarn add @nuxtjs/axios
npm i eslint-plugin-vue

Reference https://coreui.io/

Nuxt Authentication

yarn add --exact @nuxtjs/auth-next
yarn add @nuxtjs/axios

Reference https://auth.nuxtjs.org/guide/setup/

Troubleshoot

Cannot find module ‘vuetify/es5/util/colors’

Solution yarn add –dev @nuxtjs/vuetify https://www.npmjs.com/package/@nuxtjs/vuetify

node:internal/crypto/hash:67

this[kHandle] = new _Hash(algorithm, xofLen); Solution export NODE_OPTIONS=–openssl-legacy-provider

Error: No ESLint configuration found in

Solution npm install eslint -g -D eslint –init

Error Parsing error: Invalid ecmaVersion

Solution Add in the .eslintrc.json “parserOptions”: { “ecmaVersion”: 2020, “sourceType”: “module”, “ecmaFeatures”: { “globalReturn”: false, “impliedStrict”: false, “jsx”: false } }, https://github.com/vuejs/vue-eslint-parser