이것저것 코딩공부/Vue 4

nuxt3 에서 vue-quill 라이브러리로 quill.js 쓰기

빌어먹을 넉스트놈이 온갖 quill 관련 라이브러리를 거부해서 어제부터 죙일 뒤적뒤적하다가 vue-quill 깃허브에서 쓸 수 있다고 8일전에 올라왔길래 기억하는 용도로 링크 냉큼 가져옴.. 여기 안써놓으면 ㄷ나중에 또 검색하느라 하루를 보내겠지..... 준비물 - nuxt3 기본 템플릿, vue sfc를 써보기는 한 뇌 아래 링크 따라하면 됨 https://github.com/vueup/vue-quill/issues/161#issuecomment-1187359826 Nuxt 3 Support · Issue #161 · vueup/vue-quill Hello, Has anyone run the plugin innuxt 3? Is it possible? github.com - import { defineN..

Material Design Icons (mdi) 를 vue 3, nuxt 3 에서 쓰는 법

나진짜이거때매몇시간몇일을날렸다. mdi 어케 쓰는지 몰라서 라이브러리 이것저것 설치하다가 결국 호환이 안맞거나 특정 아이콘들은 임포트가 안되어서 버렸음 근데 이게 알고보니 별루..안어렵던 것입니다? 각설하고 vue 3 에서 쓰는 것. 어렵지않읍니다. 우리는 https://materialdesignicons.com/ 의 아이콘을 써줄 것입니다. 이게 여러 커뮤니티에서 만들어진 구글의 메터리얼 디자인 가이드에 맞춰진 아이콘들의 모음입니다. 일단 설치합시다. vue는 3에 맞춰 대충 준비해주십쇼. npm install @mdi/font @mdi/js mdi font랑 js 둘 다 설치해야합니다. 저 가증스러운 사이트는 font만 설치하라하는데 막상 아이콘 클릭하면 mdi/js에서 임포트함. 쒸익..!! 그리고..

[Vue3] 이미지 프리뷰 (1개/여러개) 간단하게 만들기

핵심 event.target.files URL.createObjectURL 프리뷰 만드는 방식이 어려울거라 여겼는데 생각보다 쉬워서 깜놀했땃쥐.. 굳이 vue 말고 다른 프레임워크에서도 비슷한 방식으로 하면 됨 input의 onchange 이벤트에서 event.target.files 로 파일객체들이 들어간 객체를 불러와주고 URL.createObjectURL(파일객체) 로 파일객체를 src에 넣을 주소로 바꿔준 뒤 img 태그의 src 를 업데이트 시켜주면 끝! 아래는 vue3 기준 script setup 쓸 때의 코드 + typescript 1개만 불러올 때 // import { ref } from 'vue'; const src = ref(); const addImage = (e: Event) => {..

Vue 3 SFC(Single File Component) <style>

사실 Vue3만을 위한 내용은 아니지만 Vue3기준이기에 다른 버전에선 안먹힐 수 있음. 겁나 간단한 내용들이고 공식문서에도 나오겠지만.. 나름 보기 편하게 정리. 진짜 금붕어 기억력 어뜨카냐 기본 사용법 전역적으로 적용된다. 언어 지정 원하는 언어를 설치한 뒤 lang="원하는 언어" 를 사용해서 scss, sass 등을 style 내에서 사용할 수 있다. 이건 template이나 script도 마찬가지. template에서는 lang을 pug로 설정한다던가 script에서는 ts를 넣으면 typescript로 사용할 수 있다. 범위 지정 scoped 이 코드가 적힌 파일 내의 요소에만 적용되는 스타일을 적을 수 있다. 기본적으로 자식요소에게 넘어가지 않는다. 하지만 아래와 같이 상위요소의 선택자를 가..