next.js로 이 블로그를 만들었었는데 vue도 한 번 써보고 싶어서 공부해봤습니다.


이 글 역시 잊어버리기 전에 메모해둔다는 느낌으로 작성했기 때문에.. 꽤나 불친절한 가이드일 수 있습니다. 이 점은 유의해주시길!



초기 세팅


"nuxt": "^4.0.3",


일단 제가 사용한 버전입니다. 참고하시길 바랍니다.


npm create nuxt@latest <project-name>


설치는 간단합니다. 이 명령어 한 줄이면 됩니다.


npx nuxi@latest module add eslint


모듈은 이런 식으로 설치할 수 있는데 다양한 공식 모듈을 제공해줍니다. 아이콘이나 폰트 등 간편하게 가져다 쓸 수 있습니다.


"@nuxt/eslint": "^1.9.0",
"@nuxt/fonts": "^0.11.4",
"@nuxt/icon": "^2.0.0",
"@nuxt/ui": "^3.3.2",


저는 이렇게 4가지 설치해서 사용했습니다.




Tailwind CSS


next.js로 블로그를 만들 때 사용했었는데, 굉장히 편했어서 이번에도 설치했습니다.


공식 홈페이지에 설치 가이드가 따로 있기는 한데 nuxt/ui모듈에 Tailwind CSS가 이미 포함되어 있어서 이걸 이용했습니다.


{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.classAttributes": ["class", "ui"],
  "tailwindCSS.experimental.classRegex": [
    ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}


비주얼 코드에서 Tailwind CSS IntelliSense 확장 프로그램을 써도 자동완성이 안되는 현상이 있는데 위 설정을 settings.json 파일에 추가해주시면 됩니다.



'파일' -> '기본설정' -> '설정' 순으로 들어가거나 ctrl+,를 누르면 설정창이 나오게 됩니다. 여기서 우측 상단에 settings.json을 열 수 있는 버튼이 있습니다. 여기에 코드를 추가해주시면 됩니다.



SASS/SCSS


npm install -D sass


SASS 역시 설치가 간단합니다.


pages/app.vue

<style lang="scss">
@use "~/assets/scss/main.scss";
</style>

nuxt.config.ts

export default defineNuxtConfig({
  css: ['~/assets/scss/main.scss']
})


위처럼 lang="scss"를 적거나 nuxt 설정에서 css 프로퍼티를 사용하는 식으로 이용하면 됩니다.


assets/_colors.scss

$primary: #49240F;
$secondary: #E4A79D;

nuxt.config.ts

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "~/assets/_colors.scss" as *;'
        }
      }
    }
  }
})


Vite의 전처리기 옵션을 이용해서 컬러 변수와 같은 내용을 삽입할 수 있습니다.



<style>
  @reference "tailwindcss";
  /* or @reference "./assets/css/main.css"; */
  button {
    @apply bg-amber-500 rounded-md;
  }
</style>


Tailwind CSS v4에서는 @apply과 같은 기능을 사용하려면 글로벌 스타일을 참조로 가져와야 합니다. 안그러면 @apply 기능을 사용할 수 없습니다.


저는 첫 줄에 @reference "tailwindcss";를 작성해서 이 문제를 해결했지만 매번 작성해야 하는 것이 좀 번거롭더군요. 더 간편한 방법이 있으면 좋겠습니다.