Back to top button design

Author: realstoman

src/App.vue

@@ -8,6 +8,15 @@
 			<router-view :theme="appTheme" />
 		</transition>
 
+		<back-to-top
+			visibleoffset="500"
+			right="40px"
+			bottom="40px"
+			class="shadow-lg"
+		>
+			<i data-feather="arrow-up"></i>
+		</back-to-top>
+
 		<!-- App footer -->
 		<Footer></Footer>
 	</div>
@@ -45,6 +54,13 @@ export default {
 	text-align: center;
 }
 
+.vue-back-to-top {
+	@apply p-2 sm:p-4 bg-indigo-500 hover:bg-indigo-600 text-white;
+	border-radius: 50%;
+	font-size: 22px;
+	line-height: 22px;
+}
+
 .fade-enter-active {
 	animation: coming 0.4s;
 	animation-delay: 0.2s;

src/main.js

@@ -3,12 +3,14 @@ import App from './App.vue';
 import router from './router';
 import './assets/css/tailwind.css';
 import './assets/css/app.css';
+import BackToTop from 'vue-backtotop';
 
 const feather = require('feather-icons');
 feather.replace();
 
 createApp(App)
 	.use(router)
+	.use(BackToTop)
 	.mount('#app');
 
 const appTheme = localStorage.getItem('theme');