vite-plugin-vue-layouts

vite-plugin-vue-layouts은 Vite에서 Vue.js 애플리케이션의 레이아웃을 효과적으로 관리할 수 있도록 도와주는 플러그인이다. 이 플러그인은 각 페이지에 독립적인 레이아웃을 지정하고 중첩하여 사용할 수 있는 강력한 레이아웃 시스템을 제공한다.

 

 

크게 핵심 기능을 정리하면 총 4가지로 나뉘게 된다.

 

1. 동적 레이아웃

각 페이지에 대해 독립적으로 레이아웃을 설정할 수 있다.

 

2. 중첩된 레이아웃

부모 레이아웃과 자식 레이아웃을 조합하여 복잡한 페이지 구조를 만들 수 있다.

 

3. 동적 페이지 제목 및 메타 데이터

각 페이지에 대해 동적으로 제목이나 메타데이터를 설정할 수 있다.

 

4. 동적 레이아웃 전환

런타임에서 동적으로 레이아웃을 변경할 수 있다.

 

먼저, 플러그인을 설치를 위해서는 해당 프로젝트에 npm 명령어를 실행한다.

npm install -D vite-plugin-vue-layouts

해당 플러그인은 개발시에만 필요하므로 -D라는 것을 사용하여 devDependencties에 추가해 주면 된다. 참고로 -D는 --save-dev의 축약형으로 사용이 된다.

 

설치를 진행 후에는 quasar 기반으로 한 프로젝트의 경우 반드시 아래 해당하는 quasar.config파일에 코드를 작성해야 한다.

// quasar.config.js OR quasar.config.ts

// ...
	vitePlugins: [
    	// ...
        [ 'vite-plugin-vue-layouts', { /** 옵션을 정의한다. **/ }],
        // ...
    ]
// ...

 

다음으로는 router/index.js에 추가적인 설정이 필요하다.

 

extendRoutes는 기존의 라우터 정보를을 확장하거나 정의할 수 있다. 그래서 기본적인 세팅을 아래처럼 코드를 추가를 하면 된다.

// src / router / index.js

// ...
import { setupLayouts } from 'virtual:generated-layouts';

export default route(function () {

	// ...
    const Router = createRouter({
    	// ...
        history: createHistory(process.env.VUE_ROUTER_BASE),
        extendRoutes: routes => setupLayouts(routes),
    });
    return Router;
});

 

이렇게 설정을 하고 나면 우리는 vue 파일에 아래와 같은 코드를 추가를 할 수 있다.

// Components.vue
<template></template>
<script></script>
<style></style>

<route lang="yaml">
meta: 
	layout: users
</route>

route 커스텀 블럭에 메타 정보로 레이아웃명을 users처럼 지정을 할 수 있다.

 

위의 extendRoutes에서 아래 includes의 정보에서 특정 path가 있을 때 router의 정보를 다시 세팅을 해주는 것이다.

// src / router / index.js

// ...
import { setupLayouts } from 'virtual:generated-layouts';

export default route(function () {

	// ...
    const Router = createRouter({
    	// ...
		extendRoutes: routes => {
			return setupLayouts(
				routes.map(route => {
					if (route.path.includes('admin')){
						route = {
							... route,
							meta: {
								...route.meta,
								layout: 'admin',
							}
						}
						return route;
				})
			);
		}
	});
	return Router;
});

위 코드 처럼 하는 경우 기존의 route는 그대로 유지가 되지만, admin이라는 path의 경우 layout에 admin이라는 정보는 넣어 route 커스텀 블록 설정을 좀 더 간소화를 할 수 있다.

 

 

이렇게 오늘은 route를 좀 더간소화를 할 수 있는 설정을 해보았다. 아직 많은 경험을 하지 않았기에 낯선 플러그인이지만, 좀 더 익숙해지면 만드는데 큰 문제가 없지 않을까 하는 생각이 든다.