TailwindAdmin Vue Template

Change Logo

Free Version
Premium Version

Change Light Logo

To change logo : /src/layout/logo/LogoLight.vue

Put the logo image into the src/assets/images/logos folder.

                        
<script setup lang="ts">
import { RouterLink } from 'vue-router';
import LightLogo from '@/assets/images/logos/light-logo.svg';
</script>
<template>
  <div class="logo lh-normal">
      <RouterLink to="/">
          <img :src="LightLogo" alt="home"   class="rtl:[transform:scaleX(-1)] "  /> 
      </RouterLink>
  </div>
</template>

Change Dark Logo

To change logo : /src/layout/logo/LogoDark.vue

Put the logo image into the src/assets/images/logos folder.

                        
<script setup lang="ts">
import { RouterLink } from 'vue-router';
import DarkLogo from '@/assets/images/logos/dark-logo.svg';
</script>
<template>
  <div class="logo lh-normal">
      <RouterLink to="/">
          <img :src="DarkLogo" alt="home"   class="rtl:[transform:scaleX(-1)] "  /> 
      </RouterLink>
  </div>
</template>

Change Light Logo

To change logo : package/src/layout/logo/LogoLight.vue

Put the logo image into the src/assets/images/logos folder.

                            
<script setup lang="ts">
import { RouterLink } from 'vue-router';
import LightLogo from '@/assets/images/logos/light-logo.svg';
</script>
<template>
  <div class="logo lh-normal">
      <RouterLink to="/">
          <img :src="LightLogo" alt="home" /> 
      </RouterLink>
  </div>
</template>

Change Dark Logo

To change logo : package/src/layout/logo/LogoDark.vue

Put the logo image into the src/assets/images/logos folder.

                            
<script setup lang="ts">
import { RouterLink } from 'vue-router';
import DarkLogo from '@/assets/images/logos/dark-logo.svg';
</script>
<template>
  <div class="logo lh-normal">
      <RouterLink to="/">
          <img :src="DarkLogo" alt="home" /> 
      </RouterLink>
  </div>
</template>