How can I use Custom Layout for Specific Pages of the Vuepress?

Question

I'm trying to use my own Custome Layout of the vuepress as following steps:

1. Start from Homepage style in the VuePress Document, this is working well.

2. Make the T4V4Home.vue for special layout as coping from Home.vue on the theme/components folder which is ejected, and add a <h1> This is T4V4Home !</h1> in these <template> for an indication as follows.

<template>
  <main
    class="home"
    aria-labelledby="main-title"
  >

    <h1> This is T4V4Home !</h1>

    <header class="hero">

3. Add layout: T4V4Home as follow as the step of Custom Layout for Specific Pages in the VuePress Document, in the Readme.md, but <h1> This is T4V4Home !</h1> doesn't appear, seems old "Home.vue" is still used.

---
layout: T4V4Home
home: true
#heroImage: /ueda4googleplaystore.png
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started →
actionLink: /guide/
features:

4. So, remove home: true as follows, but the standard Page layout is used unexpectedly as follows.

---
layout: T4V4Home
#home: true
#heroImage: /ueda4googleplaystore.png
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started →
actionLink: /guide/
features:

How can I activate and use my Custom Layout T4V4Home? Thank you for your suggestions!

Answer 1

Where are you putting your Custom Layout component?

The Custom Layout is working fine for me with VuePress 1.3.0.

1. Create a SpecialLayout.vue files at .vuepress/components/SpecialLayout.vue, and copy everything in the Home.vue into it. And then add a line <h1>This is a test</h1> into it.

2. Change the Frontmatter in the README.md accordingly.

---
layout: SpecialLayout
heroImage: https://vuepress.vuejs.org/hero.png
heroText: test
tagline: 
actionText: Quick Start →
actionLink: /guide/
features:
- title: Feature 1 Title
  details: Feature 1 Description
- title: Feature 2 Title
  details: Feature 2 Description
- title: Feature 3 Title
  details: Feature 3 Description
footer: Made by  with ❤️
---

And I successfully get the new HomePage

However, I'm not sure this is exactly what you are looking for, because as you can see in the screenshot above, you'll lose the NavBar at the top of the page because of Custom Layout.

If you want to preserve the NavBar, I suggest you try out Theme Inheritance.

1. Put your customized homepage component at .vuepress/theme/components/Home.vue. Yes, it needs to be named as Home.vue to replace the one in the default theme.

2. Create a index.js file at .vuepress/theme/index.js with content

module.exports = {
  extend: '@vuepress/theme-default'
}

And don't forget to change the README.md back to normal.