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.jsapp: {
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 스타일을 추가하는 방법에 대하여 간략하게 알아보았습니다.