# Examples

# Normal conversation

User 08/04/2021

Hey guys, I'm new here! Glad to be able to join you all!

Dawn 08/04/2021

Hi, I'm new here too!

Sanctuary 08/04/2021

Hey, @User and @Dawn. Welcome to our server!

Twelve 08/04/2021

Hello everyone! How's it going?

User 08/04/2021

Thank you @Sanctuary!

Yotsuba 08/04/2021

I'm doing well, @Twelve. What about yourself?

Twelve 08/04/2021

!8ball How am I doing today?

Rinon Bot 08/04/2021

Yes.

<discord-messages>
	<discord-message>
		Hey guys, I'm new here! Glad to be able to join you all!
	</discord-message>
	<discord-message author="Dawn" avatar="red">
		Hi, I'm new here too!
	</discord-message>
	<discord-message author="Sanctuary" avatar="https://i.imgur.com/0TeacfY.png" role-color="#0099ff">
		Hey, <mention>User</mention> and <mention>Dawn</mention>. Welcome to our server!
	</discord-message>
	<discord-message profile="twelve">
		Hello everyone! How's it going?
	</discord-message>
	<discord-message author="User">
		Thank you <mention :highlight="true">Sanctuary</mention>!
	</discord-message>
	<discord-message author="Yotsuba" avatar="https://i.imgur.com/amw0MGJ.png">
		I'm doing well, <mention>Twelve</mention>. What about yourself?
	</discord-message>
	<discord-message profile="twelve">
		!8ball How am I doing today?
	</discord-message>
	<discord-message :bot="true" author="Rinon" avatar="https://i.imgur.com/axQ9wJl.png" role-color="violet">
		Yes.
	</discord-message>
</discord-messages>

Vue.use(VueDiscordMessage, {
	profiles: {
		twelve: {
			author: 'Twelve',
			avatar: 'https://i.imgur.com/Mc0F0Hf.png',
			roleColor: '#15b153',
		},
	},
});

# Light mode

User 08/04/2021

Look at me I'm a beautiful butterfly

User 08/04/2021

Fluttering in the sunlight 🌞

<discord-messages :light-theme="true">
	<discord-message>Look at me I'm a beautiful butterfly</discord-message>
	<discord-message>Fluttering in the sunlight 🌞</discord-message>
</discord-messages>

# Compact mode

08/04/2021 User Look at me I'm a beautiful butterfly

08/04/2021 User Fluttering in the moonlight 🌝

08/04/2021 User Waiting for the day when

08/04/2021 User Compact mode would be turned on

<discord-messages :compact-mode="true">
	<discord-message>Look at me I'm a beautiful butterfly</discord-message>
	<discord-message>Fluttering in the moonlight 🌝</discord-message>
	<discord-message>Waiting for the day when</discord-message>
	<discord-message>Compact mode would be turned on</discord-message>
</div>

# Mentions

Sanctuary 08/04/2021

Hey, @User and @Dawn. Welcome to our server! Be sure to read through the #rules. You can ping @Support if you need help.

User 08/04/2021

Hey there @Sanctuary, thanks! I will!

<discord-message author="Sanctuary" avatar="https://i.imgur.com/0TeacfY.png" role-color="#0099ff">
	Hey, <mention>User</mention> and <mention>Dawn</mention>. Welcome to our server! Be sure to read through the <mention type="channel">rules</mention>. You can ping <mention type="role" color="#70f0b4">Support</mention> if you need help.
</discord-message>
<discord-message>
	Hey there <mention :highlight="true">Sanctuary</mention>, thanks! I will!
</discord-message>

# Complete embed

Tutorial Bot Bot 08/04/2021

Some name

Some title

Some description here

Regular field title

Some value here

Inline field title

Some value here

Inline field title

Some value here

Inline field title

Some value here

<discord-messages>
	<discord-message>
		<discord-embed
			slot="embeds"
			color="#0099ff"
			title="Some title"
			url="https://discord.js.org/"
			thumbnail="https://i.imgur.com/wSTFkRM.png"
			image="https://i.imgur.com/wSTFkRM.png"
			footer-image="https://i.imgur.com/wSTFkRM.png"
			timestamp="01/01/2018"
			author-name="Some name"
			author-image="https://i.imgur.com/wSTFkRM.png"
			author-url="https://discord.js.org/"
		>
			Some description here
			<embed-fields slot="fields">
				<embed-field title="Regular field title">
					Some value here
				</embed-field>
				<embed-field :inline="true" title="Inline field title">
					Some value here
				</embed-field>
				<embed-field :inline="true" title="Inline field title">
					Some value here
				</embed-field>
				<embed-field :inline="true" title="Inline field title">
					Some value here
				</embed-field>
			</embed-fields>
			<span slot="footer">Some footer text here</span>
		</discord-embed>
	</discord-message>
</discord-messages>

# Embed fields

# Regular fields

User 08/04/2021

Field title

Some value here. Some value here. Some value here

Field title

Some value here. Some value here. Some value here

Field title

Some value here. Some value here. Some value here

<discord-messages>
	<discord-message>
		<discord-embed slot="embeds">
			<embed-fields slot="fields">
				<embed-field title="Field title">
					Some value here. Some value here. Some value here
				</embed-field>
				<embed-field title="Field title">
					Some value here. Some value here. Some value here
				</embed-field>
				<embed-field title="Field title">
					Some value here. Some value here. Some value here
				</embed-field>
			</embed-fields>
		</discord-embed>
	</discord-message>
</discord-messages>

# Inline fields

User 08/04/2021

Inline field title

Some value here

Inline field title

Some value here

Inline field title

Some value here

<discord-messages>
	<discord-message>
		<discord-embed slot="embeds">
			<embed-fields slot="fields">
				<embed-field title="Inline field title" :inline="true">
					Some value here
				</embed-field>
				<embed-field title="Inline field title" :inline="true">
					Some value here
				</embed-field>
				<embed-field title="Inline field title" :inline="true">
					Some value here
				</embed-field>
			</embed-fields>
		</discord-embed>
	</discord-message>
</discord-messages>

# Inline fields with a thumbnail

User 08/04/2021

Inline field title

Some value here

Inline field title

Some value here

Inline field title

Some value here

<discord-messages>
	<discord-message>
		<discord-embed slot="embeds" thumbnail="https://i.imgur.com/wSTFkRM.png">
			<embed-fields slot="fields">
				<embed-field title="Inline field title" :inline="true">
					Some value here
				</embed-field>
				<embed-field title="Inline field title" :inline="true">
					Some value here
				</embed-field>
				<embed-field title="Inline field title" :inline="true">
					Some value here
				</embed-field>
			</embed-fields>
		</discord-embed>
	</discord-message>
</discord-messages>