웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > nuxtjs

nuxtjs 3, head에 스크립트 및 link css 추가하는 방법

Last Modified : 2023-05-20 / Created : 2023-05-20
2,667
View Count
nuxtjs3에서 <head> 내부에 아래와 같이 스크립트 및 link를 사용한 css 스타일을 추가하는 방법에 대하여 알아봅니다.



# nuxtjs head에 스크립트 및 link 스타일 추가하기


먼저 이 경우 방법은 아래와 같이 두 가지가 있습니다.

1. 컴포넌트 내부에 head를 사용하는 방법
2. nuxt.config.js의 app의 head 블럭에 선언하는 방법

1번의 경우 개별 컴포넌트에 선언하는 방법으로 일반적으로 특정 페이지 또는 컴포넌트에만 적용할 경우 이 방법이 사용됩니다.  만약 모든 페이지 영역에 전역으로 사용되길 원하는 경우라면 2번 방법인 nuxt.config.js 방식이 더 나은 방법이라 볼 수 있습니다. 여기서는 2번 방법인 nuxt앱에 설정하는 nuxt.config.js 파일을 사용하는 방법을 알아보겠습니다.


! nuxt.config.js에 script, link 태그 등을 추가하는 방법


이제 nuxt.config.js를 사용하는 방법을 예제와 함께 알아봅니다. 만약 아래와 같이 head에 text.js 스크립트와 base.css 스타일을 추가하고자 합니다.
<head>
  <link rel="stylesheet" href="/base.css" type="test/css" />
  <script src="/test.js"></script>
</head>

위와 같이 head에 추가할 경우 아래와 같이 nuxt.config.js 파일에 다음과 같이 코드를 추가하도록 합니다.

@ nuxt.config.js
app: {
  head: {
    link: [
      {
        href: '/base.css',
        rel: 'stylesheet',
        type: 'text/css',
      }
    ],
    script: [
      {
        src: '/test.js',
        type: 'text/javascript',
      }
    ]
  }
}

이제 코드 추가는 완료되었습니다. 실제로 nuxt앱을 확인하면 head에 test.js와 base.css가 추가된 것을 확인 할 수 있습니다.


여기까지 nuxt3에서 head 내부에 스크립트 또는 link css 스타일을 추가하는 방법에 대하여 간략하게 알아보았습니다.
아래의 글도 찾고 계시지 않나요?

    Previous

    [NuxtJS] 커스텀 에러 페이지 만들기

    Previous

    nuxtjs 웹사이트에 다국어 개발 및 적용하기, @nuxtjs/i18n