소개
게시글
질문&답변
2022.08.31
Nuxt 3 에서 eslint, prettier 사용 방법
Nuxt2 처럼 eslint 와 prettier 관련 패키지를 추가하고 환경 설정을 해서 해결하였습니다.설치한 패키지는 아래와 같습니다. 일단 Typescript는 사용하지 않아서 관련 패키지는 제외하였습니다."devDependencies": { "eslint": "^8.23.0", "eslint-config-prettier": "^8.5.0", "eslint-plugin-nuxt": "^3.2.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-vue": "^9.4.0", "nuxt": "3.0.0-rc.8", "prettier": "^2.7.1", "vite-plugin-eslint": "^1.8.1" }nuxt.config.tsimport { defineNuxtConfig } from 'nuxt'; import eslintPlugin from 'vite-plugin-eslint'; export default defineNuxtConfig({ vite: { plugins: [eslintPlugin()], }, });.eslintrc.jsmodule.exports = { root: true, env: { browser: true, node: true, }, extends: ['eslint:recommended', 'plugin:nuxt/recommended', 'plugin:vue/vue3-recommended', 'plugin:prettier/recommended'], rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debug': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-unused-vars': 'off', 'prettier/prettier': [ 'error', { singleQuote: true, semi: true, useTabs: true, tabWidth: 4, trailingComma: 'all', printWidth: 160, bracketSpacing: true, arrowParens: 'avoid', endOfLine: 'auto', }, ], }, };Nuxt3 는 설정부터 시작해서 바뀐 점이 많네요. 관련해서 강의가 생겼으면 좋겠습니다.
- 1
- 2
- 3.4K
질문&답변
2021.01.17
babel polyfill 적용관련해서 질문드려도 될까요?
그냥 설정안했더니 외부모듈(fullpage.js, swiper, gsap 등)이 바벨 폴리필이 적용이 안되어서 검색해보니 별도로 적용을 시켜줘야 한다는것 같아서 빌드 설정을 했습니다. IE에서 에러도 store.js(nuxt에 포함된 axios 인듯)에서 includes 구문에서 발생하구요. 그런데 뭐가 잘못되었는지 안되더라구요. 이것저것 막 해보다보니 라이브러리도 엉망이구요.ㅜㅜ 주말에 시간내서 답변해주셔서 감사합니다.
- 1
- 2
- 392
질문&답변
2021.01.16
Nuxt 에 babel polyfill 적용하는 방법이 궁금합니다.
답변주신 내용 참고해서 이리저리 해보다보니 IE11에서 store.js 파일에서 아래와 같은 에러가 발생고 여전히 몇몇 컴포넌트들이 표시되지 않습니다. SCRIPT438: 개체가 'includes' 속성이나 메서드를 지원하지 않습니다. nuxt.config.js 파일에 build 항목을 다음과 같이 설정하고, build: { extend(config, ctx) { config.module.rules.push({ enforce: 'pre', test: /\.(js|vue)$/, loader: 'eslint-loader', exclude: /(node_modules)/, options: { fix: true, }, }); }, babel: { presets(env, [preset, options]) { const envTargets = { client: { browsers: ['last 2 versions'], ie: 11 }, server: { node: 'current' }, }; return [ [ '@nuxt/babel-preset-app', { useBuiltIns: 'entry', targets: envTargets[env.envName], corejs: { version: 3 }, polyfills: ['es.array.iterator', 'es.promise', 'es.object.assign', 'es.promise.finally', 'es.array.includes', 'es.symbol'], }, ], ]; }, }, transpile: ['@nuxtjs/axios', 'gsap', 'swiper', 'vue-awesome-swiper', 'nuxt-fullpage.js', 'vue-datetime', 'vue-daum-postcode', 'vue-advanced-cropper'], }, 의존성은 아래처럼 설치했습니다. "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate", "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .", "lint": "npm run lint:js" }, "dependencies": { "@nuxtjs/axios": "^5.12.2", "@nuxtjs/moment": "^1.6.1", "cookie-universal-nuxt": "^2.1.4", "gsap": "^3.5.1", "luxon": "^1.25.0", "nuxt": "^2.14.6", "nuxt-fullpage.js": "0.0.3", "swiper": "^5.4.5", "vue-advanced-cropper": "^0.17.9", "vue-awesome-swiper": "^4.1.1", "vue-datetime": "^1.0.0-beta.14", "vue-daum-postcode": "^0.9.0", "weekstart": "^1.0.1" }, "devDependencies": { "@babel/preset-env": "^7.12.11", "@babel/runtime-corejs3": "^7.12.5", "@nuxt/babel-preset-app": "^2.14.12", "@nuxtjs/eslint-config": "^3.1.0", "@nuxtjs/eslint-module": "^2.0.0", "babel-eslint": "^10.1.0", "babel-loader": "^8.2.2", "core-js": "^3.8.2", "eslint": "^7.10.0", "eslint-config-prettier": "^6.12.0", "eslint-plugin-nuxt": "^1.0.0", "eslint-plugin-prettier": "^3.1.4", "prettier": "^2.1.2" }, 혹시나 제가 뭘 빠트린게 있을까요? 아니면 다른 파일들에서 추가적으로 해주어야 하는 일이 있는건가요? 주말에 질문드려서 죄송합니다. 편안한 주말되세요^^
- 0
- 5
- 2.8K
질문&답변
2021.01.15
Nuxt 에 babel polyfill 적용하는 방법이 궁금합니다.
늦은 시간에 답변 감사합니다! 답변보고 이것저것 해봤는데 정확히는 알 수 없지만 아무래도 짐작하기로 Promise가 문제인것 같은데 npm install es6-promise 설치하고 nuxt.config.js 파일에 bulid: { transfile: ['es-promise'] } 처리했는데 빌드 100%쯤 되서 IE에서 'Promise'가 정의되지 않았습니다. 라는 에러가 발생하네요. 혹시 뭘 더 추가해 주어야 하는게 있을까요?
- 0
- 5
- 2.8K
질문&답변
2020.12.02
페이지가 변경될때 마다 같은 함수를 mounted() 안에서 실행하는 방법이 있을까요?
매번 감사합니다^^
- 0
- 4
- 1.7K