CSS trouble with VUE3 and the Inspector

Questions
1

CSS isn’t my strong point and I am new to working with vue. I have a project on github that is a super simple example. basic renders the scene. I’ve set up shift-ctrl-alt-i to bring up the inspector. But it doesn’t render correctly.

I don’t understand how vue is manipulating the css. There are two locations in the code that I know of where the css is defined:

  1. App.vue
<style>
html, body, div, canvas {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
  1. HelloWorld.vue
<style scoped>
#canvas {
  width: 100%;
  height: 100%;
}
</style>

I thought I was able to fix that by removing div from App.vue, but that creates another problem where I seem to have a fixed aspect ratio and field of view, no longer filling out the entire browser window.

In the following image, you can see how there’s a block of white space.

And then bringing up the inspector really messes with the canvas.

I’ve tried reverting back to the original css for App.vue, which is:

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

But this creates a very small canvas:

When I look at the browser’s tools, there’s a ton of <style/> entries in there that are generated by vue. I don’t know if these are related to my problem or not.

I started working with vue because it was recommended to be easier to use for a beginner and I wouldn’t need to worry too much about setting up the frameworks. But I don’t know enough to code my way out of this mess.

1 Like
2

I suggest not using vue, or any other template based framework such as svelte, angular, glimmer, etc. First, your project and skills become reliant on the bundler and template complier, which will 100% be broken in a couple years. Second, when your code is inside the template files, ie: inside a script tag in vue’s case, typescript and your ide cannot type check as normal so you get bad completion and go to source. For example, try highlighting an imported variable or function name and hit f12 in vscode.

For the css stuff, i have no idea, but its definitely the vue cli bundler and not vue itself. it might be injecting normalize.css which is pretty common, which makes things have the same spacing and margin rules etc in all browsers. That really shouldnt break the inspector though, i think if it does, it maybe should be considered a bug in the inspector build if they are using non namespace or hashed css names with super common names like .box or something.

Anyway…if you’re willing to forgo vue, i can suggest some github template repos to get you started. Also, if you’re learning for job purposes in english speaking companies/countries, learn react.

2 Likes
3

Yes, I’m quite willing to kick vue to the curb. I’m not married to it at all. I do alright just using an index.html and a game.js file, but I’m wanting to move from JS to TS and I don’t know the “the way” to build my project without a framework like this.

No, I’m not doing this professionally. This is a hobby project. My job is 100% backend these days and I’m used to the Java & Gradle ecosystem. The closest I’ve really gotten to frontend dev is JSPs and groovy.

4

I ended up working thru the Getting Set Up portion of the Summer Festival tutorial. It ended up having the same effect the second set of screenshots. But I was able to set the CSS correctly.

1 Like
5

Yep unfortunately the inspector has some pretty generic css classes, we have been working on moving them to local css modules but not everything is there yet. I’ll have a look at the inspector when I can to fix this.