Creating with Vue.js and Nuxt.js: The static sidebars

Previous posts: Initial reaction

The past week or so I started to create the sidebars for my profile. Right now I’m mainly working on getting all the information done and looking semi-decent.

Basic styling:

Since I decided to create a profile site I knew how I wanted the follow and sidebars to look. I wanted the follow bar across the top and the navigation bar along the right hand side.

I am thinking about animating the follow and navigation bars and create a graphic or logo to go along with my name above the follow bar and on the home page but those will probably be part of the later stages.

In order to do this I went into the defaults.vue file in the layouts folder from when you set up Nuxt. I created a div around all three elements and another one around just the context and the navigation bar. Then I used display:grid and grid-template-columns to get the right proportions.

By putting the styling in the default file it works with every file I add. So when I create the contact and projects page or any other blog posts to put up then it will automatically have the navigation bar at the same spot.

Capture 4-6

Problems I encountered:

The top navigation bar was stuck at a min-height of 100% and I spent so long looking at the console wondering why the container class was at that no matter what I changed the height to.

The reason? I wasn’t using scoped CSS. After I tracked down this problem the rest of the styling went by so easily.

The blog posts background wasn’t changing.

The reason? This was literally just because I had exited out of one of the files I was going between so I was trying to change it in the style sheet that was a bit more specialized than I needed.

So what are my current thoughts on Vue?

I’m actually still enjoying it. It’s really easy to switch things around. If I decide to switch where the follow and navigation bars are it’d only take a couple seconds to switch them.

I’m also still loving how the HTML, CSS and JavaScript (although I haven’t used it much yet) are all in the same file. It makes it easy to see what text is on the page I’m editing and it makes it so much easier for my brain to make the connections between classes in the console and the code files.

Have you worked with any frameworks? What projects are you working on (programming or not)?

 

Let's talk!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.