What **is** Vue? 🤷🏼‍♀️

I will not be comparing Vue to React or any other framework, and I will mention Nuxt alongside Vue, as I have experience of using them together (I never got on with using Vue without Nuxt!)

I am going to talk about what Vue is, how it has helped me, and what my thoughts on it are.

We will discuss components and links and things

Are you sitting comfortably?

Then we shall begin

Vue is a JavaScript framework. If you aren't sure of what I mean by 'framework', you can read more about that here. I wrote that article just after I figured it out for myself!
The difference between Bootstrap or Tailwind (the CSS frameworks I talk about in that article) and Vue is that the CSS frameworks, especially Tailwind, mainly help you to speed up your coding (amongst other things), whereas Vue mostly helps to structure it.

Maybe you have a portfolio, or you've seen a code base for a website before. They can get pretty messy, real quick. The files can quickly get huge - with each page needing a nav bar, buttons, a header, a footer, and all the stuff in between!

The thing is, you might find that you are repeating yourself - for consistency and style you will probably be using the same buttons, and the same navbar, and the same footer, and the same... you get the picture

(there is a coding principle called DRY - Don't Repeat Yourself. You can read more about that here

That could get pretty tedious if you are building a site with a fair few pages, right?

For me, that is one of the things that I quickly liked about Vue - you can create reusable components

Like.... recycling...? ♻️

Well....yeah I guess so....

You make the effort to make a beautiful navbar. It is the perfect navbar - stylised perfectly with just the right amount of animation.
You want this navbar to feature at the top of every page of your portfolio, for consistency. Sure, you could copy and paste the code onto every page, but that would be clunky and risk errors. Imagine your site or portfolio had 20 pages, for some inexplicable reason..... serious risk of error there!

What Vue lets you do is create a file in the 'components' section (it puts one there for you automatically), name the file whatever you want. You've decided to call this file 'navbar.vue'.

Sensible!

Then, all you need to do is use <navbar></navbar> where you want it, and it'll say 'hang on, that looks like the file you just made in the components section!' and there you go!

For me personally, this is a really great reason for someone quite new to web development to use Vue - it reduces the risk of the dreaded '<div> does not have a closing </div>' fatal error that is all too familiar when you're trying to duplicate something you've done well elsewhere.

You mentioned 'Nuxt'. What is that?

Ok hold on to your hats here 🎩....

Nuxt...is a framework for Vue, and Vue is a framework for JavaScript.
A framework... for a framework?

Yes, pretty much. It seems to me that some clever sausages saw that Vue was good, but that it was missing a few things, such as SEO optimisation and browser rendering, as standard (you have to do all that separately if you are only using Vue on it's own and is a bit of a pain), so they created Nuxt, which you use on top of Vue. You could imagine it like Vue is the house that holds and orders and structures your code blocks, and then Nuxt is the cement holding it all together.
It is seamless, and I haven't come across any problem. To be honest, I don't really know where Vue ends and where Nuxt begins.

So why doesn't everyone use Vue/Nuxt?

I think it comes down to personal preference, but one of the biggest barriers that I can see is that you do actually need to spend some time learning it. Like most frameworks, this combo comes with their own rules and syntax that you need to learn.
Personally, I'm not at a stage where I can write code fluently yet, and I spend a lot of time looking up how to write stuff so that it works in Vue.
A couple of examples:

In a normal scenario, you would link your internal site pages together in standard HTML with an 'a' tag -
<a href="Your file name">link text</a>

However, Nuxt has its own way to link internal pages. Here is a button from my portfolio -

<nuxt-link to="/contact"
type="button"
class="some styling"
>Contact
</nuxt-link
>
What Vue/Nuxt do really well that I love is that they work together seamlessly to create working links between internal pages - the only difference is that you have to figure out where the file that you want to link to is in relation to the file you are in now.
This is just one example of a syntax change, and the changed away from 'vanilla' HTML and JavaScript are pretty obvious (v-if, v-else and v-on') are just some examples.

If in doubt, stick a 'v-' before the JavaScript statement, and it might just work!

In conclusion, I'm enjoying my journey of using Vue, and although I've come across a few hurdles to do with importing icons from FontAwesome, I've found that the docs are generally very helpful, and there are always people willing to v-point me in the right direction!

If you are interested in seeing some of the code for my portfolio, I show it in this short video:

🥳Vue documentation

🥳Nuxt documentation