# Plugin Options

After installation, you can configure the plugin to your liking through the following settings.

# Default font

By default, this plugin uses the Google Fonts CDN to pull in the Roboto font. This isn't the same font Discord uses, so if you want to provide your own, you can disable it and override the CSS.

// index.js
Vue.use(VueDiscordMessage, {
	disableFont: true,
});

/* index.css */
.discord-messages {
	font-family: 'Your Font', sans-serif;
}

# Default theme

If you want to use the light theme as the default for all your <discord-messages> elements, you can set the defaultTheme option.

Vue.use(VueDiscordMessage, {
	defaultTheme: 'light', // anything else will be rendered as `'dark'`
});

# Default mode

If you want to set compact mode as the default for all your <discord-messages> elements, you can set the defaultMode option.

Vue.use(VueDiscordMessage, {
	defaultMode: 'compact', // anything else will be rendered as `'cozy'`
});

# Avatar shortcuts

The current avatar shortcut strings available are "blue" (default), "gray", "green", "orange", and "red". These shortcuts map to the following image links:

{
	"blue": "https://cdn.discordapp.com/attachments/654503812593090602/665721745466195978/blue.png",
	"gray": "https://cdn.discordapp.com/attachments/654503812593090602/665721746569166849/gray.png",
	"green": "https://cdn.discordapp.com/attachments/654503812593090602/665721748431306753/green.png",
	"orange": "https://cdn.discordapp.com/attachments/654503812593090602/665721750201434138/orange.png",
	"red": "https://cdn.discordapp.com/attachments/654503812593090602/665721752277483540/red.png"
}

If you want to add to or override the shortcuts, you can use the 2nd parameter in the Vue.use() call.

Vue.use(VueDiscordMessage, {
	avatars: {
		djs: require('./assets/discord-avatar-djs.png'),
		jojo: 'https://i.imgur.com/BOlehTj.jpg',
	},
});

If you're using Webpack, you should use require() when dealing with relative paths.

Do note that you can override the default avatar value by providing a default key. The default value is 'blue', but you can change it to something like 'red', a relative path, or an external link.

Vue.use(VueDiscordMessage, {
	avatars: {
		'default': 'https://i.imgur.com/BOlehTj.jpg',
	},
});

# Profile shortcuts

Sometimes you'll want to use the same message data across multiple messages. You can do so by providing an object of profiles in the plugin options.

Vue.use(VueDiscordMessage, {
	profiles: {
		sanc: {
			author: 'Sanctuary',
			avatar: 'https://i.imgur.com/0TeacfY.png',
		},
		rinon: {
			author: 'Rinon',
			avatar: 'https://i.imgur.com/axQ9wJl.png',
			bot: true,
			roleColor: '#ee82ee',
		},
	},
});

And then in your Vue templates:

<discord-messages>
	<discord-message profile="rinon">
		Welcome to our server, <mention>Sanctuary</mention>!
		<!-- Alternatively: <mention profile="sanc" /> -->
	</discord-message>
	<discord-message profile="sanc">
		Hey, glad to be here!
	</discord-message>
</discord-messages>

Rinon Bot 08/04/2021

Welcome to our server, @Sanctuary!

Sanctuary 08/04/2021

Hey, glad to be here!

# Renaming the components

If you want to give the components different names than the default ones, due to possible naming conflictions or whatever other reason you may have, you can do so.

Vue.use(VueDiscordMessage, {
	componentNames: {
		'discord-messages': 'd-messages',
		'discord-message': 'd-message',
		'discord-embed': 'd-embed',
		'embed-fields': 'e-fields',
		'embed-field': 'e-field',
		mention: 'd-mention',
	},
});