directory structure
.nuxt
개발 모드에서 vue application을 만들기 위한 directory
.output
배포 모드에서 vue application을 만들기 위한 directory
assets
프로젝트에 사용되는 모든 assets을 포함하며 빌드 도구인 webpack, vite의 영향을 받는다.
- Stylesheets (CSS, SASS, etc.)
- Fonts
- Images that won’t be served from the public/ directory
만약 assets을 서버에서 가져오고 싶다면 public 루트에 넣는 것이 좋음.
components
컴포넌트들을 넣어두는 디렉토리. 컴포넌트는 pages 안에 있는 vue 페이지나 component에서 import 될 수 있음. Nuxt는 components 디렉토리에 있는 파일을 자동으로 import 해줌.
Component Names
| components/
--| base/
----| foo/
------| Button.vue
만약 다음과 같이 중첩되는 디렉토리를 가졌다면
컴포넌트 이름은 <BaseFooButton /> 가 된다.
Dynamic components
resolveComponent 를 사용해서 동적으로 빌트인 컴포넌트를 이용하여 component를 import 할 수 있다.
<template>
<component :is="clickable ? MyButton : 'div'" />
</template>
<script setup>
const MyButton = resolveComponent('MyButton')
</script>
Dynamic imports
컴포넌트를 동적으로 import하기 위해서는 component이름 앞에 Lazy를 붙임
컴포넌트가 항상 필요하지 않을 경우에는 동적으로 맞는 타이밍에 import 시킴으로써 번들 사이즈를 최적화 할 수 있음.
Library Authors
사용할 라이브러리의 자동 import와 tree-shaking이 쉬움
node_modules안에 있는 각 라이브러리 디렉토리에 nuxt.js파일을 만들고 components:dirs 훅에서 control 할 수 있음.
nuxt.config에서
export default {
modules: ['awesome-ui/nuxt']
}
다음과 같이 modules로 라이브러리를 추가 할 수 있음.
composables
Nuxt는 vue의 composable을 auto import 함.
예를들어
composables
| - useFoo.ts // scanned
| - useBar
| --- supportingFile.ts // not scanned
| --- index.ts // scanned
위와 같은 디렉토리 구조에서 useFoo.ts 와 useBar/index.ts 는 자동으로 import된다. 특히 useBar/index.ts 는 index로 등록 되지 않고 userBar로 등록된다.
export const useBar = () => {
}
// Enables auto import for this export
export { useBaz } from './supportingFile'
만약 useBar/supportingFile.ts 를 자동으로 import하고 싶을 때는 위와 같이 useBar/index.ts에서 userBar/supportingFile.ts를 다시 한번 export 시켜줘야 한다.
layouts
Nuxt는 커스텀가능한 layout을 제공하는데
만약 예를들어 pages 디렉토리가 아닌 app.vue 하나에서 사용 한다면
-| layouts/
---| custom.vue
-| app.vue
라는 디렉토리 구조에서
custom.vue는
<template>
<div>
Some shared layout content:
<slot />
</div>
</template>
다음과 같이 보여줄 페이지 자리에 <slot/>을 입력함
<template><NuxtLayout name="custom">
Hello world!
</NuxtLayout></template>
app.vue에서 layout을 다음과 같이 사용함
만약 /pages 디렉토리를 사용한다면
-| layouts/
---| custom.vue
-| pages/
---| index.vue
다음과 같은 디렉토리 구조에서
<script>
// This will also work in `<script setup>`
definePageMeta({
layout: "custom",
});
</script>
index.vue 파일에 definePageMeta 메서드를 이용하여 layout을 지정해 사용할 수 있다.
middleware
Nuxt는 커스텀 가능한 route middleware를 제공함. 이는 global하게 앱 전역에서 사용이 가능함
지정한 route에 navigate 할 때 code를 작성할 수 있음.
pages
Usage
Nuxt는 vue router를 이용해 file-based 라우팅을 제공함
page와 component는 .vue .js .jsx .ts .tsx 확장자를 가질 수 있음
pages/index.vue
<template><h1>Index page</h1></template>
pages/index.ts
// <https://vuejs.org/guide/extras/render-function.html>
export default defineComponent({
render () {
return h('h1', 'Index page')
}
})
pages/index.tsx
// <https://vuejs.org/guide/extras/render-function.html#jsx-tsx>
export default defineComponent({
render () {
returnIndex page
}
})
pages 디렉토리 안 index.vue 는 / route와 매핑됨
transition을 이용하려면 무조건 하나의 root element를 가져야 함
⇒ server-rendered 된 페이지는 불가능
definePageMeta({
title, // This will create an error
someData
})
으로 router의 meta data를 지정할 수 있음
특별한 Metadata로는 keepalive, key, layout, middleware, layoutTransition, pageTransition, alias 등이 있음
Navigation
두 페이지 간 전환이 필요할 때 <NuxtLink> 컴포넌트를 이용함.
NuxtLink 컴포넌트는 Nuxt에 기본으로 포함되어 있어 import할 필요 없음
<template><NuxtLink to="/">Home page</NuxtLink></template>
위와 같이 to=”/path” 형식으로 라우팅함
Programmatic Navigation
navigateTo() 메서드를 이용하여 프로그래밍적으로 라우팅이 가능함
<script setup>
const router = useRouter();
const name = ref('');
const type = ref(1);
function navigate(){
return navigateTo({
path: '/search',
query: {
name: name.value,
type: type.value
}
})
}
</script>
plugins
Nuxt는 plugins 디렉토리의 plugin 파일들을 자동으로 읽음
.server .client 같은 파일 뒤 suffix로 서버사이드 렌더링이나 클라이언트 사이드 렌더링에서 사용되는 플러그인을 구분 할 수 있음
plugins/ directory의 가장 상위 레벨의 파일들이 plugin으로 등록됨
예를들어
plugins
| - myPlugin.ts
| - myOtherPlugin
| --- supportingFile.ts
| --- componentToRegister.vue
| --- index.ts
에서 myPlugin.ts 와 myOtherPlugin/index.ts 가 등록됨
Creating plugins
export default defineNuxtPlugin(nuxtApp => {
// Doing something with nuxtApp
})
plugin을 정의 할때 받는 매개변수는 nuxtApp 하나임
Automatically providing helpers
export default defineNuxtPlugin(() => {
return {
provide: {
hello: () => 'world'
}
}
})
위와 같이 Nuxtapp 인스턴스에 helper를 제공하기 위해서는 provide key 밑 property로 설정 후 provide를 return 함
<template><div>
{{ $hello() }}
</div></template><script setup lang="ts">
// alternatively, you can also use it here
const { $hello } = useNuxtApp()
</script>
vue 파일에선 위와 같이 사용함
'프론트엔드 > vue.js' 카테고리의 다른 글
| [Nuxt3] Nuxt3가 지원하는 렌더링 방식 (0) | 2022.05.09 |
|---|---|
| [Nuxt3] Nuxt3 features 설명 (0) | 2022.05.03 |
| [vue.js / Nuxt] Nuxt 기초 (1)라우팅, SSR, SSG (0) | 2022.04.13 |
| ChunkLoadError 해결기 (1) 문제점 파악 및 테스트 과정 (0) | 2022.03.31 |
| [SPA] 뒤로 가기 스크롤 유지에 관하여(2) (0) | 2021.12.27 |