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