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.
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.
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.
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.
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.
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.
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