Templates Help Hire Us

Checkout Pro Version

vue VueJs Version angular Angular Version next NextJs Version tailwind Tailwind Version react NuxtJs Version bootstrap Bootstrap Version
Get Pro
All Access Pass

Change Logo

Change light Logo

To change logo : packages/main/src/layouts/full/logo/LogoLight.vue
Put the logo image into the /images/logos folder. 
                            
<script setup lang="ts">
import { RouterLink } from 'vue-router';
import logo from '@/assets/images/logos/logo-light.svg';
</script>
<template>
  <div class="logo">
      <RouterLink to="/">
          <img :src="logo" alt="home" />
      </RouterLink>
  </div>
</template>

Change Dark Logo

To change logo : packages/main/src/layouts/full/logo/LogoDark.vue
Put the logo image into the /images/logos folder. 
                            
<script setup lang="ts">
  import { RouterLink } from 'vue-router';
  import logo from '@/assets/images/logos/logo-dark.svg';
</script>
<template>
    <div class="logo">
      <RouterLink to="/">
          <img :src="logo" alt="home" />
      </RouterLink>
    </div>
</template<

Change Light RTL Logo

To change logo : packages/main/src/layouts/full/logo/LogoLightRtl.vue
Put the logo image into the /images/logos folder. 
                            
<script setup lang="ts">
  import { RouterLink } from 'vue-router';
  import logo from '@/assets/images/logos/logo-light-rtl.svg';
</script>
<template>
    <div class="logo">
        <RouterLink to="/">
            <img :src="logo" alt="home"/>
        </RouterLink>
    </div>
</template>

Change Dark RTL Logo

To change logo : packages/main/src/layouts/full/logo/LogoDarkRtl.vue
Put the logo image into the /images/logos folder. 
                            
<script setup lang="ts">
  import { RouterLink } from 'vue-router';
  import logo from '@/assets/images/logos/logo-dark-rtl.svg';
</script>
<template>
    <div class="logo">
        <RouterLink to="/">
            <img :src="logo" alt="home"/>
        </RouterLink>
    </div>
</template>

Change Logo

To change logo : /components/layout/full/logo/LogoDark.vue 
                            
<script setup lang="ts">
  import { RouterLink } from 'vue-router';
  import Logoimg from "/images/logos/logo.svg";
</script>
<template>
  <div class="logo">
    <RouterLink to="/">
      <img :src="Logoimg" alt="home" />
    </RouterLink>
  </div>
</template>