Tag: layout

How to enable custom layout for routes in Nuxt3

How to enable custom Layout for a pages in Nuxt3


Layouts in Nuxt 3 and Nuxt 2 have some minor changes. In Nuxt 2 we have used <Nuxt/> component to render pages / routes (if you using ~pages ) .

Nuxt 3 replaced the Nuxt component with <Slot/>.

How to create a Layout ?

To create and apply custom layout, we need to create Layouts folder and create our layouts. 

//custom.vue
<template>
<div data-theme="winter" class="">   
    <header>
     <Header/>
    </header>
    <main class="h-screen w-full grid  overflow-auto ">
      <slot/>
    </main>
    <footer>
    <Footer/>
    </footer>
  </div>
</template>

Applying Layout

We can apply layout to pages using the the defineMeta section in the page component.

//pages/index.vue
<template>
  <div class="flex justify-center">
    <div class="p-1 h-full w-3/4 ">
      <Hero />  
    
    </div>     
  </div>
</template>

<script setup>
  definePageMeta({
   layout: "custom",
 });
</script>

It also require to wrap the root component with <NuxtLayout> as follows

//app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Applying layout in a template

We can apply templates using the NuxtLayout component directly into the HTML. Wrap the components with the NuxtLayout and pass the layout name.

<template> 
  <NuxtLayout name='custom'>
   <h1>Hello world</h1>
  </NuxtLayout>
</template>

Default layout

To create a default layout , create a component file with Layouts/default.vue and will be used for all pages with no Layout specified.

Disabling Layout

Suppose you want disable default layout for particular page, pass layout as false.

 definePageMeta({
   layout:false,
 });

Create a smart layouting system for Vue3 app

How to apply layouts dynamically at router level in Vue 3


Layouting in Vue is nothing but another use of reusable components. Different pages require different elements (UI), such as navigation, menu etc. Some of them are repeated in each page, like router links / page links.

We can create layout for such components and wrap child with the layout. Can I apply it at the router level ?. A dynamic layout / router level layout will serve the needs.

Dynamic AppLayout

The concept is not new, create layout constructor and apply layout based on the route change. First up all create folder named layouts and Applayout.vue file.

This example uses Vue 3 setup

<template>
  <component :is="layout">
    <slot />
  </component>
</template>

<script>
import AppLayoutDefault from './AppLayoutDefault'
export default {
  name: "AppLayout",
  data: () => ({
    layout: AppLayoutDefault
  }),
  watch: {
    $route: {
      immediate: true,
      async handler(route) {
        try {
          const component = await import(`@/layouts/${route.meta.layout}.vue`)
          this.layout = component?.default || AppLayoutDefault
        } catch (e) {
          this.layout = AppLayoutDefault
        }
      }
    }
  }
}
</script>

This is a wrapping component which will check the route meta layout and apply dynamically. We can use this component at App.vue as follows.

<template>
  <div id="app">
    <AppLayout>
		<router-view />
	</AppLayout>
  </div>
</template>

<script>
import AppLayout from './layouts/AppLayout'
export default {
  name: 'App',
  components: { AppLayout }
}
</script>

Default Layout

We need a blank layout in case no layout is specified. In our layouts folder create AppLayoutDefault.vue with simple slot.

<template>
  <div>
    <slot />
  </div>
</template>

Other layouts

Let’s focus on Home layout AppLayoutHome.vue, 

<template>
  <div>
    <header class="header" >Home Layout</header>	 
    <slot />
  </div>
</template>
<script>
 
export default {
  name: "AppLayoutHome", 
}
</script>

You can also create a LinkLayout for router Links too, I skipped it for simplicity.

Now our Layouting almost ready with two layout, a final configuration is required to work this setup.

Applying Layouts

In the router/index..vue locatte the router configuration and add out meta layout property as follows

 {
    path: '/',
    name: 'Home',
    component: Home,
	meta:{
		layout:'AppLayoutHome'
	}

That’s it we are not ready to go.

The complete source code of the project can be found at Vue3 Repo

How to implement layout system for Vue app

How to implement a layouting system of your own for Vue app


I am familiar with Nuxtjs, a framework that sit at the top of the Vue, they have a simplified version of Vue’s view folder structure. It also enable us to implement different layout for pages. How can I do this on Vue ?

Vue Layout

In a Vue project with router we have App.Vue which treated as the layout page for our app. It cab be the layout page. We can add navigation,sidebar ect here, don’t remove the router-view component.

Layout for login

Suppose you need a different layout for login page, no need for nav bars or anything like that. How can we achieve thin in Vue ?

Vue is focus on simplicity, flexibility. For our case we have to use a simple trick to create a layout. Leave the app.vue with router-view only and do the following

  • Create a layout pages as component
  • with slot we can replace the layout content
//login page
<template>
 <layout>
  <template v-slot:default>
  //login page content here
  <template>
 <layout>
<template>

Here layout is a component, we can create as many layouts we want. Since the main page has no design, it will work.

Got anything better than this , let me know.

Following Vue store posts may help you

DISPLAY DIFFERENT LAYOUTS USING FRAGMENT IN A ANDROID STUDIO APP


Android Studio makes App development so easy with supported libraries and classes. Today we are discussing how to show different layout within the main fragment. ( A layout is GUI Windows in Android Studio, where we can place controls and widgets)

How ?

Basically, this can be done by placing a frame layout inside the main fragment layout and place the different layouts.

Create the Drawer Activity App

Android Studio Version:  1.3

Android Version: 22

Begin a New Android Project with Navigation Drawer Activity. Go to Layout folder of the project and access  fragment_main.xml  and add a FrameLayout at the end of the Relative Layout tag, replace the TextView, if exist.

<FrameLayout
    android:id="@+id/FrameContainer"    android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>

Note that we assigned an id for the FrameLayout, which can be accessible using the id. You can also customize the Drawer menu by changing the string.xml resource file.

Now we need two additional resources.

  1. An addition Layout
  2. Java Class representing Additional Layout.

Creating a Frame Layout

In Android a Window has two sides, one has GUI and design and a program part/machine part.

Let create our first FrameLayout XML file By Right click the Layout folder – New – Layout Resource File and enter following Details

Name:dashboard_fragment

Root Element : FrameLayout

Click OK and Drag Large Text Files and add “This is my Dashboard” as Text, in order to identify. We also need the second part, a class to represent the Layout.

Creating Class

A Java Class is behind the wheel for every Layout, it should extend the fragment class.

Right click your Main_Activity -New – Java Class with Name DashboardFragment and add the following overridden OnCreateView method.

public class DashboardFragment extends android.support.v4.app.Fragment {
    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup
container, Bundle savedInstanceState) { View rootview=inflater.inflate(R.layout.
dashboard_fragment_main,container,false); return rootview;    }
}

The Navigation Fragment event

We can fill the  MainFragment’s FrameLayout with the help of fragment manager, just go to the NavigationDrawerFragment.Java  and find the private void selectItem(int position) method, at bottom of the line add the following code.

android.support.v4.app.FragmentManager frg=getFragmentManager();if (position==0){
    frg.beginTransaction().replace(R.id.FrameContainer, new DashboardFragment()).commit();


In the above code, we just replace the content of FrameContainer with new FrameLayout. You can add as many as the layout in the same manner. Here position carries menu item id.


Let’s Run the project