Search⌘ K
Home
Courses
Vue - The Road to Enterprise

Logging Values in SFC Template

Discover how to debug Vue Single File Component templates by logging values using an automatically registered BaseLog component. This lesson guides you on bypassing Vue template restrictions on console access to efficiently inspect variables and improve troubleshooting in your applications.

We'll cover the following...

From time to time, we might want to check what values are in a template. However, there’s no access to the console.log method directly in the Vue template, and if we try to use it, we’ll get an error. We can create a new method on the Vue component just to log out values, but it’s very tedious to do it every time we want to see what kind of value a variable in the template contains. Instead, we can use an automatically registered component, as shown below.

Javascript (babel-node)
// BaseLog.vue (Vue 2)
<script>
export default {
	functional: true,
	props: ['log'],
	render(h, ctx) {
		process.env.NODE_ENV !== "production" && 
		   console.log(`%c LOG: `, 'background: #222; color: #bada55', ctx.props.log);
		   // eslint-disable-next-line
		return;
	},
};
</script>

Let’s look at the ...