[Nuxt3] BootStrap 부트스트랩 css, js 적용
·
프로그래밍 일기/Front-End
버전 정보 Nuxt 3.6.2 nuxt.config.ts export default defineNuxtConfig({ devtools: { enabled: true }, app: { head: { link: [ { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css', integrity: 'sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD', crossorigin: 'anonymous' } ], script: [ { src: 'https://cdn.jsdelivr.net/npm/bootstra..
NUXT3 VUE useFetch, useAsyncData 사용 방법
·
프로그래밍 일기/Front-End
버전 정보 Nuxt 3.6.2 useAsyncData const {data: testResponse} = await useAsyncData('userDetail', () => $fetch('http://localhost:8080/list/load', { query: { test1: 'test1', test2: 'test2' } })); 일반적으로 GET방식의 통신을 위해 사용된다. 위 통신을 통해 얻은 결과값의 .data가 testResponse라는 변수에 들어가게 된다. useFetch · Nuxt Composables This composable provides a convenient wrapper around useAsyncData and $fetch. It automatically generate..
인텔리제이 IntelliJ Nuxt.js 생성 (Nuxt3)
·
프로그래밍 일기/Front-End
먼저 실행창에서 명령 프롬프트(CMD) 창을 열어줍니다. 이후 원하는 경로로 이동합니다. [cd ..] 뒤로가기 [cd 경로] 해당 경로 이동 먼저 node.js가 설치되어 있어야 합니다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Nuxt3 시작하기 Nuxt: The Intuitive Web Framework nuxt.com 해당 경로에 npx nuxi@[버전 or latest] init [프로젝트명] 위아 같이 입력하면 정상적으로 작동할겁니다. 이제 개발을 위해 인텔리제이로 해당 프로젝트를 실행시켜 보겠습니다. 인텔리제이에서 Open을 통해 생성된 프로젝트에 접속합니다. Trust..
인텔리제이 IntelliJ Nuxt.js 생성 (nuxt2)
·
프로그래밍 일기/Front-End
먼저 실행창에서 명령 프롬프트(CMD) 창을 열어줍니다. 이후 원하는 경로로 이동합니다. [cd ..] 뒤로가기 [cd 경로] 해당 경로 이동 먼저 node.js가 설치되어 있어야 합니다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org npm init nuxt-app [프로젝트명]을 입력하면 해당 경로에 nuxt프로젝트가 생성됩니다. 해당 명령어를 입력하면 여러가지 선택사항이 나오는데 모두 Enter를 입력하여 default값으로 설정해도 됩니다. 이렇게 생성이 완료되었다면 프로젝트가 있는 경로로 이동한 후 npm run dev를 실행하면 됩니다. localhost:3000을 브라우저에 ..