? Slapbot Dashboard

Starter Image Created to give a responsive interface to all the bots that I’ve created (. This is a work in progress and will be updated as I continue to build out the bots.

Each user will have a single profile linking their entire social media presence together.

Run the app

  1. Have the python backend running python ../cli.py backend (from the root directory of this social-bots-collection)
  2. Install the deps npm install
  3. Run the frontend npm run dev

Stuff used

Custom Sass File

The .scss file that can be found in the assets folder have some gradients & other styles. They can be deleted or updated.

Helpers Folder

The helper folder contains the custom stuff for the Vuetify plugin

Custom Icons – customIcons.ts

  1. Create the Icon component that will be used to render the icons. I just extended the Icon component from the nuxt-icon package.

<template>
	<div>
		<Icon v-bind="$attrs" />
	</div>
</template>
<script setup></script>

  1. Create the aliases object. Ensure that you pass in all the icons that are used by the Vuetify system.

  2. Create the custom object.

const custom: IconSet = {
	component: (props: IconProps) =>
		// Return render function
		h(MIcon, {
			name: props.icon /** The Icon component requires the name prop in order to render the correct icon */,
			tag: props.tag,
			disabled: props.disabled,
		}),
};

Here is a link to the docs for this Creating a custom iconset

Global Defaults – defaults.ts

This file here just set global props on different vuetify components. You can learn more here Global Configuration

Themes – themes.ts

This file will hold all the different themes that you want to use in your app. Feel free to add more crazy schemes lol. Learn more here: Vuetify Themes

Form Rules – Composable

I added one composable for form rules. Add more here. You can even try integrating other validation packages like yup or zod

Icons

The public folder contains a favicon & icon. Change these out for your app and be sure to tweak the pwa config inside the nuxt.config file to fit your app

GitHub

View Github