DPS909 — rc 0.3 — Week 1

Nov 5, 2018 · 4 min read

Hacktoberfest has ended with rc 0.2, it’s time to dig into a real project. This time I chose Vuetify, a material design component framework, since I am intested in Vue and generally Javascript.

The First Issue

Vuetify does not support overflow app officially, but we can override the html style to achieve that. And when using v-menu in an overflow page, the drop-down content will have incorrect position. Example is below. More details at the Issue.

Scroll the horizontal bar and click menu

Start to Investigate

I only had basic knowledge about Vuetify and Vue in general. Therefore, it took awhile for me to adapt to the project.

The first step was to clone the repository and run the test, and this was when I encountered the very first problem. The project structure was really complicated in a way I had never seen before. There are several package.json files, so it should be that Vuetify combined multiple projects into one repository.

3 PJs in 1 repo: API, npm module, and the website source code

This caused me a lot of troubles with cross-dependencies, and I could not run any scripts even though I already went into each project and installed the packages using npm. Then I started to look through the codes, thinking there must be some sytem to manage multi-projects, and it should have a config file, and then I found the file “lerna.json”, also the description in realease 1.3.4.

Release v1.3.4

This was how I learned about Lerna, a tool for managing Javascript projects with multiple packages. Also, Vuetify used yarn instead of npm. There’s a few differences between the two and that’s also the reason I met some errors while using npm in this project.

The Development Mode

Now I could install the dependencies and run all the scripts, it’s time to figure out how to start the development mode. Every similar frameworks (Angular, React,…) offer us a dev mode with hot-reloading to make the coding process more convenient.

This was when I met the second problem. I could not run the dev mode. Now I started to look into the logs, also researched the PRs to see what the others do.

Description in a PR requiring Playground.vue component
The log also required Playground.vue

Now I knew I should create a component for the test case, which was nice because anyway I had to customize the test based on the Codepen.io snippet the the first section.

The Component Format

Now at this stage I met the third trouble. The Vue component format I knew was the single file component, where the template, logic and style are combined into one file with the extension “.vue”. However Vuetify uses a different way to manage component. Each component is stored in a separated folder with the entry is “index.js”, sort of a module structure.

v-menu component

This also lead to a different way to render a component. Vuetify uses render function to generate visual image of an element. This is important because the issue was about menu content was rendered incorrectly. In short words, it’s where we start to track the error. I never used render function before, but thanks to the clear document on Vue website, it didn’t take that much to learn the new function.

Render function

The Next Step

After adapting to new project, next week is when I start to solve the issue. During this week I learned a couple of things:

  • Lerna & Yarn
  • Vuetify project structure
  • Vuetify development mode & Component format
  • Render Function



Written by

Software Development Student — Seneca College


Software Development Student