Release v5.0.2

Release v5.0.2

Release v5.0.1

Release v5.0.1

Release v5.0.0

Release v5.0.0

v4.0.0

v4.0.0! 🎉

Breaking changes

In v3, the profile shortcuts plugin option is set via a profiles object property in your Vue.use() call, and then used as <discord-message user="id">. In v4, the user prop has been renamed to profile.

The Discord avatar shortcut images are also no longer bundled with this package and are now served as CDN links. This allows for a much smaller package size! 🎉

Additions

The Mention component now has default content for the default slot. If the default slot is left empty, the mention will be rendered as 'User', 'Role', or 'channel', depending on the type prop given.
It now accepts a profile prop as well. This will either use the profile's author property to set the default slot content (if empty) , or use the profile's roleColor property to set the color for role pings.

<discord-messages>
	<discord-message>Hey there, <mention />!</discord-message> <!-- "Hey there, @User! -->
	<discord-message>Hey there, <mention profile="sanc" />!</discord-message> <!-- "Hey there, @Sanctuary! -->
	<discord-message>Hey there, <mention profile="sanc" type="role" />!</discord-message> <!-- "Hey there, @Role! (colored ping) -->
</discord-messages>

v3.2.0

There are 2 new plugin options: defaultTheme and defaultMode.

If you want to use the light theme as the default for all your <discord-messages> elements, you can set the defaultTheme option. 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, {
	defaultTheme: 'light', // anything else will be rendered as `'dark'`
	defaultMode: 'compact', // anything else will be rendered as `'cozy'`
});

v3.1.0

There's now a docs site you can refer to! 🎉 https://vue-discord-message.netlify.com/
The timestamp prop's default value on the <discord-message> component is now new Date().

v3.0.0

v3.0.0! 🎉

Breaking changes

• All CSS class names are now namespaced beginning with discord- (e.g. author-info -> discord-author-info), to avoid possible class name conflicts coming from your own CSS or a library or such.
• The author prop in the <discord-embed> component has now been split into 3 different props: authorName, authorImage and authorUrl.

Additions

• The bold version of Roboto is now included.
• There's a new user prop for the <discord-message> component. You can use it as so:

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 user="rinon">
		Welcome to our server, <mention>Sanctuary</mention>!
	</discord-message>
	<discord-message user="sanc">
		Hey, glad to be here!
	</discord-message>
</discord-messages>

v2.0.0

v2.0.0! 🎉 The <discord-message> component has 2 new props: edited and timestamp. The breaking change would be considered the CSS adjustments made to better mimic Discord messages.

v1.3.0

The Roboto font now gets pulled in from Google Fonts, and the plugin options allow you to disable this behavior so that you can provide your own font.

v1.2.0

This version provides a browser build of Vue Discord Message! 🎉 https://unpkg.com/vue-discord-message