Turning HTML & CSS into Vue Components

gravatar
By Marcin
 · 
October 7, 2020
 · 
2 min read

Note

The template I was using to format the code on this page deprecated and all the code samples are no longer visible. I am currently trying to recover these.

In this specific example we're going to turn the Navbar area from a predominantly HTML and CSS document into a modular Vue Component.

At this point, the Vue Nuxt project has been set up, and all the code is being done a Vue file in the ".../project-name/pages" folder. Here's an example of the starting file.

/code

The Steps

  1. Find a section of the code that you want to turn into a component, in this case Navbar.
  2. Create a new folder for the component and save it there. In our example, this is within the components folder (ex: ../component/blog-v2/blog-navbar.vue)
  3. Copy the code you want to componentize
  4. Create <template> </template> tags and paste that code within
  5. Look through your code and consider which things you'll want to customize (html classes, menu labels, image sources, page titles, etc). We'll begin turning these into props and whatnot, shortly.

Step 6: Create <script></script> tags and make the export code.

Within the export, we've decided we're going to need to customize the:

  • title: the company name which appears in the top left corner of the navbar and
  • the primary action button: call to action button on the top right side

Step 7: Import the navbar

Step 8: Copy/paste the current static text into props

We're basically going to replace the original navbar with the dynamic navbar using the props "title" and "cta"

Step 9: Replace the customizable areas with bracketed dynamic code

In the navbar vue file, we're going to make some edits. Lets look specifically at the original navbar title.

Above, we see the title "La Isla Bonita" is hard-coded. We want to replace this with the following.

Step 10: Copy/paste the styles over to the new Vue file

Comments

No Comments.