Want to ace the Vue.js Certification? Besides the obvious knowledge of knowing Vue it might be helpful to know what to expect from the testing platform. Use these tips to avoid issues during exam coding challenges!
Daniel Kelly
July 16, 2024
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!
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.
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.
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.
Sometimes we see people having trouble viewing the output of their code in the app preview on the right hand side.
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.
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.
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).
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.
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.
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
During the exam you’ll have 2 challenges to complete.
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.
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.
Get the latest news and updates on developer certifications. Content is updated regularly, so please make sure to bookmark this page or sign up to get the latest content directly in your inbox.
What you need to know to be a successful JS dev
Explore essential JavaScript skills for junior and mid-level developers. From core concepts to advanced features, learn what's needed to build robust web applications. Find out how to validate your expertise and grow your career in web development.
September 5, 2024
Daniel Kelly
Mastering Asynchronous JavaScript: From Callbacks to Async/Await and Beyond
Explore the evolution of asynchronous JavaScript, from callbacks to Promises and async/await. Learn how these developments have transformed coding practices, making web apps more responsive and efficient. Discover advanced concepts and glimpse the future of async programming.
August 29, 2024
Daniel Kelly
The Evolution of JavaScript: From Simple Scripting to AI and Beyond
Journey through JavaScript's evolution, from basic scripting to powering complex web apps and AI. Discover how this versatile language has transformed web development, expanded to server-side programming, and continues to shape the future of technology.
August 22, 2024
Daniel Kelly
We can help you recruit Certified Developers for your organization or project. The team has helped many customers employ suitable resources from a pool of 100s of qualified Developers.
Let us help you get the resources you need.