During the Vue.js Certification exam you’ll need to complete both multiple choice questions and 2 coding challenges in order to get your certificate. The coding challenges must be completed within the embedded StackBlitz code editor that ships within the exam platform.

Needless to say, the embedded editor isn’t exactly the same as your favorite IDE that you work with locally. Plus, there are some limitations to the coding process due to the exam environment and the need to make the assessment fair and free from cheating.

So what can you expect to be a little different from local development and how can you best be prepared to code within the constraints of the exam environment? Let us help guide you through what to expect!

Debugging During Exam Coding Challenges

Browser Devtools

During the coding challenge portion of the exam you are free to open up the browser dev-tools including the elements panel, console, and any other panel you’d like. When nothing else is producing results, this is your best bet for debugging. Unfortunately, it can get a little noisy with platform stuff being logged and so you might have to search through it a bit more than desired.

The Stackblitz Terminal

A cleaner way to see those console logs, errors, and warnings is in the terminal underneath the open file in the editor. All the logs, errors, and warnings that are sent to the browser console are also mirrored here with help from the awesome Vite plugin: vite-plugin-terminal.

The Vue Devtools

If you have been developing with Vue for a while, then you’re probably used to the Vue Devtools chrome extension. This is a tried and true way of debugging Vue apps. Unfortunately, it does not work with the app preview within the StackBlitz editor since it’s in an embedded sandbox environment. Don’t worry though, you still have full access to your Vue component data and component tree, thanks to the “next” version of Vue Devtools. This Vite plugin is installed on every code challenge and can be used by clicking the tab at the bottom of the app preview with the Vue log on it.

Trouble with the App Preview During Coding Challenges

Sometimes we see people having trouble viewing the output of their code in the app preview on the right hand side.

Maybe you have an error in your code that caused the app to crash

The StackBlitz editor re-runs your code in real time as you write new code. This usually means slick real time updates of your running app. But sometimes your app runs with errors because you weren’t done typing what you wanted to type. In such cases, the app preview might crash and not restart once you’ve finished what you were typing.

No problem! In such cases do exactly what you do on local. Refresh the page BUT with one important difference! Refresh just the app preview page and not the whole browser tab.

How? Use the refresh button at the top left of the app preview panel.

Change the Saving Mode of the Editor

If you’d prefer to save your file manually with by pressing Cmd + S (or Ctrl + S on Windows), you can do so using the cog on the left hand side of the editor and setting the “Compile trigger” setting to true.

Your other options here include: Save, Edit, and Keystroke.

Working Around Limitations in Autocomplete

The embedded StackBlitz editor doesn’t do great with autocomplete in single file components (.vue files). We are actively working to find solutions for this and improve the experience but in the meantime you can work around it with this simple hack. Write some temp code in a throw away .js or .ts file where autocompletion has absolutely NO trouble and then copy and paste it into your .vue file. Done and done!

I find myself doing this not just for the Vue exam but in StackBlitz projects in general (I use StackBlitz all the time for sharing code and app previews in blog posts, issue reproductions, and more).

Reverting to the Start of the Challenge

Sometimes you get too far lost and you just want to start over. No problem! You can start any coding challenge over with the Reset button in the bottom left hand side.

Do note, this does reset the entire codebase back to start. So if you want to be able to reference the starting point for any file without reverting all of your changes, it might be a good idea to duplicate the file before starting edits of your own. This gives you an easy way to reference the starting point of the challenge while keeping your own edits in place.

Working with Browser API’s and Other “Non-Vue” Things

In order to be a good Vue developer we’re convinced you MUST also be a good JavaScript developer. So you will have to do plenty of JavaScript-y things on the exam. However, we also know that a very common part of real world development is the ability to look things up: Go to stack-overflow, google that error you’ve got, etc.

On the exam platform though, we have to be a little stricter because, well it’s a test! Since Vue is so connected to JavaScript and the browser environment, sometimes you must interact with browser API’s. In such cases, we do provide hints within the coding challenge instructions to help you.

Or you can always explore API’s within the browser devtools, with console log, or via the autocomplete of a .ts or .js file.

Also note, that during the exam you are NOT allowed to visit stack overflow, MDN docs, etc. However during the coding challenge portion ONLY (NOT during the multiple choice section), you WILL have access to the Vue.js docs.

Handling the Checklist at the End of Each Coding Challenge

Once you complete the requirements for a coding challenge and hit the “Next” button to move on, you’ll be presented with a checklist to help you check yourself. This checklist is very important! When we’re grading your exam we use the same checklist to ensure you’ve completed the required tasks. So make sure you read these carefully and truthfully answer them. Doing so will give you immediate insight into how you’ve done on the coding challenges and will keep from missing any requirements before submitting.

Screenshot of the checklist at the end of each coding challenge

Tackling Bug Challenges

During the exam you’ll have 2 challenges to complete.

1. A feature challenge - where you must implement some application feature: like a login form, modal overlay component, etc.
2. A bug challenge - where a known bug lives in an existing app and your job is to fix it

For the bug challenges it’s important to note that we try to focus on more Vue specific bugs. In other words, for the bug challenges we’re trying to test you on your knowledge of Vue. Therefore, don’t expect bugs to be the result of some syntax error somewhere (like a missing comma) or poor logic in some vanilla JS helper function. Instead focus on issues that would be cause by doing some Vue specific thing the wrong way. A really great and FREE resource to help prepare for completing bug challenges is the Vue School course: Common Vue.js Mistakes and How to Avoid Them. It’s 100% FREE and covers a lot of the topics that crop up in bug challenges.

Conclusion

We hope this guide has helped you better prep for the exam! If you’ve already taken the exam and have any tips to add, we’d love to hear from you.

PS. - I know what some of you are thinking about the screenshots in this post… but don’t get too excited. They aren’t from a real challenge on the actual exam 😉 . We’ll save those for when you’re in the real thing.