Vue 4

Vue3 다크모드 적용버튼 만들기 (VueUse, TailwindCss)

참고영상) https://www.youtube.com/watch?v=7_mqThfC_yM 1. TailwindCss 설치하기 https://tailwindcss.com/docs/guides/vite#vue Install Tailwind CSS with Vite - Tailwind CSS Setting up Tailwind CSS in a Vite project. tailwindcss.com npm install -D tailwindcss postcss autoprefixer 2. VueUse 라이브러리를 설치한다 npm i @vueuse/core 3. 내가 다크모드를 만들고 싶은 페이지에 import 한다 import { useDark, useToggle } from "@vueuse/core"; cons..

Vue 2023.02.02

Vue에 Tailwindcss 적용하기

https://tailwindcss.com/docs/guides/vite#vue Install Tailwind CSS with Vite - Tailwind CSS Setting up Tailwind CSS in a Vite project. tailwindcss.com 여기 있는 스텝을 차근차근 따라가면서 테일윈드를 설치할 수 있다. 일단, 테일윈드를 적용시킬 프로젝트가 필요하다. vue create 프로젝트이름 프로젝트를 생성한 후에는, 엉뚱한 곳에 tailwind가 설치되지 않게 경로를 바꿔주어야한다. cd 프로젝트이름 cli설치를 하면 준비가 끝난다. npm install -g @vue/cli 테일윈드를 설치하려면, 콘솔창에 차례대로 npm install -D tailwindcss postcss au..

Vue 2022.12.06

유튜브 API 가져와서 Vue에서 사용하기(1): 내 API key 가져오기

1. 구글 클라우드 플랫폼 접속 https://console.cloud.google.com/welcome?project=avian-altar-310408&hl=ko Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 2. API 및 서비스 메뉴에서 사용자 인증 정보 누르기 3. 상단에 있는 사용자 인증정보 만들기 > API키 클릭 4. 만들어진 API 목록에서 사용할 API 클릭 5. API key 복사하기

Vue 2022.11.10