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>