Versions Compared

Old Version 3

changes.mady.by.user Mirco Hoffmann (Unlicensed)

Saved on

compared with

New Version Current

changes.mady.by.user Prativa Beura

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Let's start with the home page. The file you have to edit is located in we are looking at is. src/views/WelcomeView.vue
This is the page that is loaded by the router when someone clicks on Home.

As you can see, the sections of the home page are divided into components that are imported and embedded here.

Code Block
<template>
  <single-column-layout>
    <!-- Catcher -->

    <WelcomeHeader></WelcomeHeader>

    <!-- Logos -->

    <WelcomeLogoCloud></WelcomeLogoCloud>

    <!-- Blog -->

    <WelcomeBlog></WelcomeBlog>

    <!-- Help Center FAQ Forum -->

    <WelcomeHelpCenterBanner></WelcomeHelpCenterBanner>

    <!-- Support -->

    <WelcomeSupport></WelcomeSupport>
  </single-column-layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import WelcomeHeader from '../components/welcome/WelcomeHeader.vue';
import WelcomeBlog from '../components/welcome/WelcomeBlog.vue';
import WelcomeHelpCenterBanner from '../components/welcome/WelcomeHelpCenterBanner.vue';
import WelcomeSupport from '../components/welcome/WelcomeSupport.vue';
import WelcomeLogoCloud from '../components/welcome/WelcomeLogoCloud.vue';

export default defineComponent({
  components: {
    WelcomeLogoCloud,
    WelcomeSupport,
    WelcomeHelpCenterBanner,
    WelcomeBlog,
    WelcomeHeader,
  },
  setup() {
    return {};
  },
});
</script>

As you can see, the sections of the home page are divided into components that are imported and embedded here.

Edit a component

Let's jump into one of the components used above. src/components/welcome/WelcomeHeader.vue

...

Here you can change the title for example.
If you have started the Develop Portal with Vite, the modification will be visible immediately.

Create a new component

You can also create and import completely new components. Create a new file!
src/components/welcome/OurTeam.vue

...

Code Block
<template>
  <single-column-layout>
    <!-- Catcher -->

    <WelcomeHeader></WelcomeHeader>

    <!-- OurTeam -->

    <OurTeam></OurTeam> 

    <!-- Logos -->

    <WelcomeLogoCloud></WelcomeLogoCloud>

    <!-- Blog -->

    <WelcomeBlog></WelcomeBlog>

    <!-- Help Center FAQ Forum -->

    <WelcomeHelpCenterBanner></WelcomeHelpCenterBanner>

    <!-- Support -->

    <WelcomeSupport></WelcomeSupport>
  </single-column-layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import WelcomeHeader from '../components/welcome/WelcomeHeader.vue';
import WelcomeBlog from '../components/welcome/WelcomeBlog.vue';
import WelcomeHelpCenterBanner from '../components/welcome/WelcomeHelpCenterBanner.vue';
import WelcomeSupport from '../components/welcome/WelcomeSupport.vue';
import WelcomeLogoCloud from '../components/welcome/WelcomeLogoCloud.vue';
import OurTeam from '../components/welcome/OurTeam.vue';

export default defineComponent({
  components: {
    OurTeam,
    WelcomeLogoCloud,
    WelcomeSupport,
    WelcomeHelpCenterBanner,
    WelcomeBlog,
    WelcomeHeader,
  },
  setup() {
    return {};
  },
});
</script>

Result

...

You have changed the title and added a completely new component to the home page.

...