웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
nuxtjs3에서 <head> 내부에 아래와 같이 스크립트 및 link를 사용한 css 스타일을 추가하는 방법에 대하여 알아봅니다.
먼저 이 경우 방법은 아래와 같이 두 가지가 있습니다.
1. 컴포넌트 내부에 head를 사용하는 방법
2. nuxt.config.js의 app의 head 블럭에 선언하는 방법
1번의 경우 개별 컴포넌트에 선언하는 방법으로 일반적으로 특정 페이지 또는 컴포넌트에만 적용할 경우 이 방법이 사용됩니다. 만약 모든 페이지 영역에 전역으로 사용되길 원하는 경우라면 2번 방법인 nuxt.config.js 방식이 더 나은 방법이라 볼 수 있습니다. 여기서는 2번 방법인 nuxt앱에 설정하는 nuxt.config.js 파일을 사용하는 방법을 알아보겠습니다.
이제 nuxt.config.js를 사용하는 방법을 예제와 함께 알아봅니다. 만약 아래와 같이 head에 text.js 스크립트와 base.css 스타일을 추가하고자 합니다.
위와 같이 head에 추가할 경우 아래와 같이 nuxt.config.js 파일에 다음과 같이 코드를 추가하도록 합니다.
@ nuxt.config.js
이제 코드 추가는 완료되었습니다. 실제로 nuxt앱을 확인하면 head에 test.js와 base.css가 추가된 것을 확인 할 수 있습니다.
여기까지 nuxt3에서 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>
<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',
}
]
}
}
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 스타일을 추가하는 방법에 대하여 간략하게 알아보았습니다.
아래의 글도 찾고 계시지 않나요?