Vue - The Road to Enterprise/

...

/

Layout Factory

Layout Factory

Learn how to implement the product layout using the layoutFactory() function.

We'll cover the following...

Currently, the ProductLayout component imports the useProductLayout function and the LAYOUTS object from layout/composables/useProductLayout. However, because we want to decouple it, the layout state must be consumed differently. Instead, the ProductLayout component can receive the useLayout function through props. Below we can see what the ProductLayout script content will look like when we’re done:

Press + to interact
<!-- layout/ProductLayout.vue -->
<template>
	<component :is="currentLayoutComponent">
		<template v-for="slotName in Object.keys($slots)" :key="slotName" v-slot:[slotName]="slotProps">
			<slot :name="slotName" :layout="layout" v-bind="slotProps" />
		</template>
	</component>
</template>
<script>
	import { computed } from "vue";
export default {
	props: {
		useLayout: {
			type: Function,
			required: true,
		},
	},
	setup(props) {
		const { layout, currentLayoutComponent } = props.useLayout();
    
		return {
			layout,
			currentLayoutComponent,
		};
	},
};
</script>

Notice that we don’t have a layoutComponents object that maps LAYOUTS to corresponding components. There’s also no computed for the currentLayoutComponent value. Instead, it’s abstracted and comes from the useLayout composable. This is accomplished with the help of a layoutFactory helper function.

The

...