Forem: Kristijan Pajtasev

Introduction to Nuxt.js: The Framework for Universal Vue.js Applications

Kristijan Pajtasev — Tue, 02 Jul 2024 00:19:58 +0000

Nuxt.js is a powerful, open-source framework built on top of Vue.js for creating universal applications. It simplifies the development of server-rendered Vue applications and static websites. Here's an overview to get you started with Nuxt.js and understand why it might be the right choice for your next project.

What is Nuxt.js?

Nuxt.js extends Vue.js by providing an opinionated and robust structure for building applications. It abstracts away much of the configuration required for managing Vue applications and offers a streamlined development experience.

Key Features of Nuxt.js

Universal Applications: Nuxt.js allows you to create universal (isomorphic) applications, which means the same code can run on both the client and the server. This capability enhances SEO, improves performance, and provides a better user experience.
Automatic Code Splitting: Nuxt.js automatically splits your code into smaller chunks, which are loaded on demand. This improves page load times and application performance.
Powerful Routing System: Nuxt.js leverages file-based routing, meaning you can create routes by simply adding Vue files in the pages directory. This approach simplifies the process of managing routes in your application.
Server-Side Rendering (SSR): Nuxt.js makes it easy to enable SSR, which renders your Vue components on the server and sends the fully rendered HTML to the client. This results in faster initial load times and better SEO.
Static Site Generation (SSG): With Nuxt.js, you can generate static websites. This approach combines the benefits of static sites (like speed and security) with the flexibility of dynamic content.
Module System: Nuxt.js comes with a modular architecture that allows you to extend the framework’s capabilities using plugins and modules. Examples include PWA support, authentication, and analytics.
Development Tools: Nuxt.js provides a set of development tools, including a powerful CLI, hot module replacement, and detailed debugging capabilities, which enhance the development experience.

Getting Started with Nuxt.js

To get started with Nuxt.js, you need to have Node.js and npm (or yarn) installed on your machine. Here’s a quick guide to setting up a new Nuxt.js project:

Install Nuxt.js: Use the following commands to create a new Nuxt.js project:

   npx create-nuxt-app <project-name>
   # or
   yarn create nuxt-app <project-name>

Follow the prompts to set up your project configuration.

Project Structure: After creating your project, you’ll notice the following directories and files:
- pages/: Vue files in this directory correspond to routes in your application.
- layouts/: Define layout components that can be used across different pages.
- components/: Reusable Vue components.
- static/: Static files (like images and fonts) that won’t be processed by Webpack.
- store/: Vuex store files for state management.
Development Server: Run the development server with the following command:

   npm run dev
   # or
   yarn dev

Your Nuxt.js application will be accessible at http://localhost:3000.

Example: Creating a Simple Page

To create a simple page in your Nuxt.js application, add a new Vue file in the pages directory:

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Welcome to Nuxt.js</h1>
    <p>This is your homepage.</p>
  </div>
</template>

<script>
export default {
  head() {
    return {
      title: 'Home Page',
      meta: [
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  }
}
</script>

<style>
/* Add your styles here */
</style>

This simple example demonstrates how to create a new page, manage metadata for SEO, and add styles within a single file.

Conclusion

Nuxt.js enhances the capabilities of Vue.js by providing an intuitive and flexible framework for building universal applications. Whether you're developing a server-rendered app, a static site, or a single-page application, Nuxt.js offers the tools and structure needed to streamline your workflow and optimize your application.

By leveraging Nuxt.js, developers can focus on writing application-specific code without worrying about the underlying configuration, making it an excellent choice for both small and large-scale projects.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.

VueJS part 14: Scoped slots and conditional slot rendering

Kristijan Pajtasev — Sun, 03 Dec 2023 23:19:43 +0000

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In this post, I am covering two, bit more advanced topics of the slots. One of them is conditional slots. I called it conditional, but that is not the best way to call it. What I mean here is checking if the slot template is defined. The second one is scoped slots. Scoped slots are important because sometimes you want to pass some data to the slot. For that, you need to use scoped slots.

Initial component

A great example we can use for scoped and conditional slots is a list. Lists are quite a common requirement in UI development. Depending on the use case, we would render different list items differently. Let’s start by defining this starter list component that will in its basic version just accept the list of items we want to render.

<template>
  <ul>
    <li v-for="item in listItems" :key="item.id">List item</li>
  </ul>
</template>

<script>
export default {
  props: ["items"],
  computed: {
    listItems() {
      return this.$props.items;
    }
  },
  data() {
    return {}
  }
}
</script>

Items I am using in this example are quite simple, they contain the id, title, and description property. As I progress in this post, I will use all of them.

Conditional slots

In our list, I want to display both the description and the title, so we can update our template as follows.

<template>
  <ul>
    <li v-for="item in listItems" :key="item.id">
      <div>{{item.title}}</div>
      <div>{{item.description}}</div>
    </li>
  </ul>
</template>

This would display wanted data, but quite often there are requirements to display this data differently. Sometimes just styling, other times, maybe something more, and even sometimes different for each use case. And as we already saw previously, slots are a great way to achieve that.

<template>
  <ul>
    <li v-for="item in listItems" :key="item.id">
      <div>
        <slot name="title"></slot>
      </div>
      <div>
        <slot name="default"></slot>
      </div>
    </li>
  </ul>
</template>

We could use this by adding slot templates to the usage of our list component.

<template>
  <div class="about">
    <h1>Slots advanced example</h1>
    <ListWithSlots :items="items" >
      <template #title>title</template>
      <template #default>description</template>
    </ListWithSlots>
  </div>
</template>

This is perfectly fine, but what if we don’t want to pass slot templates every time? In that case, nothing would be displayed. Which is not what we want. For such a situation, we would check if the slot is defined, and in case it is not, use our default version that just displays the data.

So far, we could have seen how this keyword gives us access to many useful things. One of them is access to the slots. We can use it in the script to check if some slot template is defined by using this.$slots or in the template by just using the $slots. Then in combination with the v-if directive, we either show the default template or the slot template.

<template>
  <ul>
    <li v-for="item in listItems" :key="item.id">
      <div>
        <slot v-if="$slots.title" name="title"></slot>
        <div v-else>{{item.title}}</div>
      </div>
      <div>
        <slot v-if="$slots.default" name="default"></slot>
        <div v-else>{{item.description}}</div>
      </div>
    </li>
  </ul>
</template>

Scoped slots

In the example above, when I used slots, maybe you noticed that I hardcoded strings, and didn’t use the values. This is because slots are not able to access the scope of the component, therefore they are not able to access the data. But there is a way to pass data to the slot component. And those are the scoped slots.
To use this we need to do two things. First, in the component, when using the slot, we need to pass all the props we are going to use. Then, we need to update templates for slots and define the value for the slot name directive.

<template>
  <ul>
    <li v-for="item in listItems" :key="item.id">
      <div>
        <slot v-if="$slots.title" name="title" :title="item.title"></slot>
        <div v-else>{{item.title}}</div>
      </div>
      <div>
        <slot v-if="$slots.default" name="default" :description="item.description"></slot>
        <div v-else>{{item.description}}</div>
      </div>
    </li>
  </ul>
</template>

Now that data is passed, we can use this data in the slot template. To do it we just need to give some value to the v-slot directive, and this value is the name we are going to use to access passed values.

<template>
  <div class="about">
    <h1>Slots advanced example</h1>
    <ListWithSlots :items="items" >
      <template #title="titleProps">{{ titleProps.title}}</template>
      <template #default="defaultProps">{{ defaultProps.description }}</template>
    </ListWithSlots>

    <ListWithSlots :items="items" />
  </div>
</template>

One thing to note is that when using the scoped slots, you don’t need to define a name to access values, you can use destructor immediately and access the values that way.

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.

VueJS part 13: Introduction to slots

Kristijan Pajtasev — Sun, 26 Nov 2023 23:40:54 +0000

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In this post, I will cover a feature I like a lot in Vue, slots. I already covered how you can pass data to the components using the props, but slots allow us to pass custom templates. This might sound weird at first, but think of something like the modal. Every modal usually has a backdrop, and content container but the content inside can be different. You don’t want to create a full modal every time, and slots help us to do that in a more reusable way.

Initial component

I will not go into too many details when it comes to the initial component. Let's just assume we have one, the PopUpMessage component, to which we will pass some content it will display. For simplicity, I will not add any show-and-hide logic to it.

Simple Usage

First, we need to add some code to our PopUpMessage component so that it knows where it will render your content. We do that by adding the slot tag inside of its template.

<template>
  <div>
    <div>PopUp Message</div>
    <slot></slot>
  </div>
</template>

Now that we defined where content is going to be rendered, we need to pass it. In the simplest version, all we need to do is place content between the opening and closing tags of the component.

<PopUpMessage>
  Content
</PopUpMessage>

Passing using the template tag

An alternative way to achieve the same as above is to use a template tag and add the v-slot directive to it.

<PopUpMessage>
  <template v-slot>Content</template>
</PopUpMessage>

At this moment you might be looking at the code above and think that we achieved the same result as before. But with more complexity. And you would be right, however, the usage above does have its benefit. And that is named slots.

Named slots

I am repeating myself. Passing templates is a very useful feature and enables us to build more reusable code. But what when we need to pass multiple separate templates? Think again of our PopUpMessage component. Passing content is great, but what if we want to customize the header as well? We could pass one big content containing both, but maybe a better option would be passing them separately so that the PopUpMessage component can place them in the appropriate place. The first step to do this is to update the PopUpMessage component.

<div>
  <div>
    <slot name="header"></slot>
  </div>
  <slot></slot>
</div>

If we run the previous usage of this component, just content will be shown. So we need to also add some code that will pass the header template. We do that by adding another template and adding a slot name after the v-slot directive.

<PopUpMessage>
  <template v-slot:header>PopUp message header</template>
  <template v-slot>Content</template>
</PopUpMessage>

Named slot shorthand

Vue also supports shorthands for the v-slot directive, and it is done by using the hash sign and name of the slot after it. For the unnamed slot, we use the name default.

<PopUpMessage>
  <template #header>PopUp message header</template>
  <template #default>Content</template>
</PopUpMessage>

Conclusion

There are many more features and benefits of the slots. But I hope that from this short post, you got enough introduction to understand what they are. And in the next post, I will cover things like scoped slots.

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.

VueJS part 12: Exposing methods and data in components

Kristijan Pajtasev — Sun, 19 Nov 2023 21:23:56 +0000

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. So far, I mostly used data and methods properties of the component. However, there are other, better ways to expose data or run some function and that is the topic of this post. So let us start with creating the initial component first.

Initial component

For better demonstration, I am starting with the parent component. This component has two counters and two buttons, each incrementing one of them. Then this component passes it to the child component which will display counter values in different ways. While simple and redundant, this example will help demonstrate the different ways and impacts of each one.

<template>
  <div>
    <div>{{firstCounter}}</div>
    <div>{{secondCounter}}</div>
    <ChildComponent :firstCounter="firstCounter" :secondCounter="secondCounter" />
    <div>
      <button @click="updateFirstCounter()">increment first</button>
      <button @click="updateSecondCounter()">increment second</button>
    </div>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {ChildComponent},
  data() {
    return {
      firstCounter: 0,
      secondCounter: 0,
    }
  },
  methods: {
    updateFirstCounter() {
      this.firstCounter++;
    },
    updateSecondCounter() {
      this.secondCounter++;
    }
  }
}
</script>

Data object

You could display data in the template by using the props directly, but for now, let’s ignore that part. So we can use another, very simple way to do it by returning props data as a return value of the data object.

<template>
  <div>
    <div>
      <div>data</div>
      <div>first: {{first}}</div>
      <div>second: {{second}}</div>
    </div>
  </div>
</template>

While very simple, this kind of display does come with its very big problem. If you run this code, it will display both values to be zero. But if you click any of the buttons to trigger the increment, the value will not change. The reason is that the data object is created on the mounting of the component, and doesn’t re-run on the props update.
Methods

One way to overcome the previous problem is by using the methods. In the methods, you can return a prop value, and every time it changes, the method will run, and an updated value is displayed.

<template>
  <div>
    <div>
      <div>data</div>
      <div>first: {{first}}</div>
      <div>second: {{second}}</div>
    </div>
    <div>
      <div>method</div>
      <div>first: {{firstMethod()}}</div>
      <div>second: {{secondMethod()}}</div>
    </div>
    <div>
      <div>computed</div>
      <div>first: {{firstComputedMethod}}</div>
      <div>second: {{secondComputedMethod}}</div>
    </div>
    <div>
      <div>Watch</div>
      <div>first: {{firstWatch}}</div>
      <div>second: {{secondWatch}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["firstCounter", "secondCounter"],
  data() {
    const {firstCounter, secondCounter} = this.$props;
    return {
      first: firstCounter,
      second: secondCounter,
    }
  },
  methods: {
    firstMethod() {
      console.log("firstMethod")
      return this.$props.firstCounter
    },
    secondMethod() {
      console.log("secondMethod")
      return this.$props.secondCounter
    }
  },
}
</script>

The code above does resolve the previous issue. But it also comes with its problems. And that is performance. Maybe you noticed I placed logs in both functions. If you run this code, and press one of the incrementing buttons, you can notice the log message from both functions. That is because they are run on every update, so if any data value or prop changes it will run all of the used methods. If you have a lot of them, it could cause performance problems.

Computed

Computed methods are quite similar to the normal methods, except for the previous, regular method issue. When running them, Vue checks what values each computed method uses, and only runs it when one of those values changes.

<template>
  <div>
    <div>
      <div>computed</div>
      <div>first: {{firstComputedMethod}}</div>
      <div>second: {{secondComputedMethod}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["firstCounter", "secondCounter"],
  data() {
    return {
    }
  },
  computed: {
    firstComputedMethod() {
      console.log("firstComputedMethod")
      return this.$props.firstCounter
    },
    secondComputedMethod() {
      console.log("secondComputedMethod")
      return this.$props.secondCounter
    }
  },
}
</script>

If you check the logs, when updating one counter, only one method is run, not all of them.

Watchers

Watchers are quite similar to the computed. Once a dependency changes, it will run some functions. Then in that function, you can do some work or just update the value in the data. Which would result in it being updated with the new prop value and displayed. The difference is that you need to name the watcher by the prop or data name. That is the way it knows which value to watch for changes.

<template>
  <div>
    <div>
      <div>Watch</div>
      <div>first: {{firstWatch}}</div>
      <div>second: {{secondWatch}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["firstCounter", "secondCounter"],
  data() {
    const {firstCounter, secondCounter} = this.$props;
    return {
      firstWatch: firstCounter,
      secondWatch: secondCounter,
    }
  },
  watch: {
    firstCounter () {
      console.log("first counter watch")
      this.firstWatch = this.$props.firstCounter
    },
    secondCounter () {
      console.log("second counter watch")
      this.secondWatch = this.$props.secondCounter
    }
  }
}
</script>

Computed vs Watch

At this moment you might be thinking what is the difference between the computed and watchers, and when you should watch which? Mostly, you should use computed. The reason is that computed can run depending on multiple values, and you can name them appropriately and not only based on the props or data. However, if you are running some asynchronous operation, watchers could be more suitable.

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.

VueJS part 11: Sending data from component to parent

Kristijan Pajtasev — Fri, 10 Nov 2023 16:57:40 +0000

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In the last post, I covered how to pass the data to the component. This post will cover how to send data from the component to the parent.

Initial component

We can start with the initial component set. A parent component will display the number how many times the button was clicked, and a child component that contains a button and send an update to the parent when a button is clicked.

<!--Parent component-->
<template>
  <div>
    <div>Number of clicks: {{counter}}</div>
    <CounterButton></CounterButton>
  </div>
</template>

<script>
import CounterButton from './CounterButton.vue';
export default {
  components: {CounterButton},
  data() {
    return {
      counter: 0
    }
  },
  methods: {}
}
</script>

<!--Child component-->
<template>
  <div>
    <button type="button" @click="handleClick">Click</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    handleClick() {
      console.log("handle click")
    }
  }
}
</script>

Sending data to parent

When sending data from the child component to the parent, we do it by broadcasting events. Every component has access to the event emitter function, and you can access it in the component with this value. When calling it, the first parameter is the event type and the second data you want to send if any.

this.$emit(EVENT_TYPE, PAYLOAD);

For our example, I will call the event increment-counter, and as I will always increment by one, there is no need to pass any data to it.

export default {
  data() {
    return {}
  },
  methods: {
    handleClick() {
      this.$emit("increment-counter");
    }
  }
}

Receiving data from the component

When your component broadcasts data, the parent component still needs to receive it somehow. You can do it like handling any other event, by using the v-on directive. Event type you broadcast in your emit, is the type you are using in the directive.

<!--Parent component-->
<template>
  <div>
    <div>Number of clicks: {{counter}}</div>
    <CounterButton v-on:increment-counter="increment"></CounterButton>
  </div>
</template>

<script>
import CounterButton from './CounterButton.vue';
export default {
  components: {CounterButton},
  data() {
    return {
      counter: 0
    }
  },
  methods: {
    increment() {
      this.counter++;
    }
  }
}
</script>

Declaring events

When building components that broadcast events, it is a good practice to declare events the component broadcasts. This is done by using the emits property of the component.

export default {
  emits: ["increment-counter"],
  data() {
    return {}
  },
  methods: {
    handleClick() {
      this.$emit("increment-counter");
    }
  }
}

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.

VueJS part 10: Passing data to the components

Kristijan Pajtasev — Tue, 31 Oct 2023 14:21:22 +0000

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In the previous parts, I created some simple components. However, there is much more to them than what I used so far. And one of the basic requirements is passing data. In this post, I will be covering how to do that.

Initial component

First, I will start with the simplest possible component. A greeting component displaying just the text “Hello, John”.

<template>
  <div>Hello, John</div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: { }
}
</script>

Passing data to the component

The problem with this component is that it always displays the same name, John. Usually, you would want to change the name so it could be reused in different situations. And we could do that by passing that information to the component. We do this by using props. Since we are using components as if they are HTML elements, passing props is done as if they are attributes.

<Greeting name="John" />

In the code above, the name is hardcoded. In a real-world example, you would probably have such a thing somewhere in your script code, and you could use the variable name to pass it. This is done with the bind directive, v-bind, or the short notation.

<Greeting :name="name" />
<Greeting v-bind:name="name" />

Using data in the component

Simple props definition

If you want to use the passed props, you need to define in the component code which props it should expect. The simplest way is by adding a props property, containing the list of prop names.

<script>
export default {
  props: ["name"],
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

When you add a prop to the list, it doesn’t mean it needs to be used. But if you don’t add it, you won’t be able to use it.

Using props in templates and methods

Once you define props, you need to use them. One, and the simplest way is using them directly in the template by using the prop name.

<div>Hello, {{ name }} </div>

Another way is by exposing it in some way from the component script code. In it, you could access the props by accessing this.$props object. Then you could return the desired prop value in some type of method or the data object.

<script>
export default {
  props: ["name"],
  data() {
    return {
      personName: this.$props.name
    }
  },
  methods: {
    getName() {
      return this.$props.name
    }
  }
}
</script>

There is one important thing to remember. If you are assigning a prop value to some property in the data object, if that value changes in the parent, the data property won’t automatically update. That is because assigning to the data object only happens during the mounting process.

Advanced props definition

When declaring the props above, I did it using the array of props names. Alternatively, you could also declare them using the object. In that case, the key is the name of the prop and the value is the constructor function of the value expected type. If you are using TypeScript, you could also directly use the type annotations.

<script>
export default {
  props: {"name": String},
  data() {
    return {
      personName: this.$props.name
    }
  },
  methods: {
    getName() {
      return this.$props.name
    }
  }
}
</script>

This might be a bit of extra work, but it does have its benefits. In the case you accidentally pass some invalid value, you will get a warning in the console. And that can help you track the problem easier.

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.

VueJS part 9: Creating components in the .vue files

Kristijan Pajtasev — Wed, 25 Oct 2023 15:02:18 +0000

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In the previous parts, I always used CDN to load Vue, until the last part where I finally created a project with CLI. This gave us new files with the .vue extension, and in this post, I am covering what those are and how to use them when creating the components.

.vue files

These new files are not something that is natively supported. They are something introduced by the Vue team. You can't just load them in the browser. To use them, you need some compilers that will compile them and generate pure JavaScript, HTML, and CSS files. Thankfully, when you create a project using the CLI, you also get all the loaders set up for this task.

Now you might wonder, why would you want to use these files. If you followed previous parts of this series where I used CDN to load Vue, maybe you noticed how I wrote the component template in one long string. Also, I didn’t use any styling and everything was placed in one single file. With these, you can split your code into multiple files, but also group script, template, and styling code together, as these files support that. This option will show great benefits once you start using it in components. That is why to better explain it, we are going to create a simple component using the old way, and then convert it to a new way.

Simple component – the old way

We are going to start with a simple component used in the previous posts. A component that takes two props, first and last name, and displays them in the HTML. It could be written as the code below.

const PersonDetails = {
    template: `
    <div>
      <div>{{firstName}}, {{lastName}}</div>
    </div>`,
    data() {
        return {
            firstName: this.$props.firstName,
            lastName: this.$props.lastName
        }
    },
    props: ["firstName", "lastName"],
    methods: { }
}

app.component('PersonDetails', PersonDetails);

And then you could use it in your content like this:

<PersonDetails first-name="John" last-name="doe"></PersonDetails>

Migrating to the new way

We can migrate the same component into the new .vue file. And let’s do that in steps.

1. Create the .vue file

If you created the project with the CLI, there will be a components folder. Inside of it create the PersonDetails.vue file.

2. Add tags

Once the file is created, you can add tags where your code will be. Those are the script tags that will hold your JavaScript code, the template containing the HTML, and the style where your CSS should go.

<script></script>
<template></template>
<style></style>

3. Add template code

When you create tags, you can add a template. For that, just move everything from the previous template property between template tags. With difference, it should not be surrounded by quotes.

<template>
  <div>
    <div>{{firstName}}, {{lastName}}</div>
  </div>
</template>

4. Migrate script code

You might have guessed, that the rest of the component code needs to be placed between the script tags, with some notes. The first one is that you are moving a configuration object but without template property. The second one is that the object needs to be exported using the export command as if it is a simple JavaScript module.

<script>
export default {
  data() {
    return {
      firstName: this.$props.firstName,
      lastName: this.$props.lastName
    }
  },
  props: ["firstName", "lastName"],
  methods: { }
}
</script>

5. Migrate styles if using any

In this code, I didn’t use any CSS, but if you had any, you could add them between the style tags.

6. Import component in your main file

In the CLI-generated project, the application is initialized in the main.ts file. This is where you would import the component code. When importing something from the components folder, bundlers are set so you can use the @/components alias.

import PersonDetails from '@/components/PersonDetails.vue';

7.Register component

While the code is there, and you imported it, the component still needs to be registered. But that is easy. You can use the same line of code as before, replacing that big object definition with this new imported one.

app.component('PersonDetails', PersonDetails);

A few things to note
There are different ways to register components, and I used this simple one where all of them would be imported into the main script. When the application grows, it would not be the best option for performance. But the goal of this post is to demonstrate using the .vue files. There are also many other things we could use in these vue files. Things like the new composition API for creating the component code, scoped styling, and more. But for the same reason, I am not going into details on those also, and all of them will be covered in future posts.

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.

VueJS part 8: Creating the Vue app with CLI

Kristijan Pajtasev — Tue, 17 Oct 2023 19:30:47 +0000

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In the previous parts, every time I used VueJS I loaded it from CDN and wrote all the code in a single JavaScript file. In this part, I will cover an alternative way to generate a project using the command line and what benefits we get using it that way.

CDN project and its problems

In all the previous articles I imported Vue from the CDN. All the code was in a single index.html file and a single index.js file. If you are building a small application, that might be ok. But what when you have a larger system? Big company projects, something like a webshop, but even something smaller like a simple to-do list can grow complex. Keeping component template in string. Most templates are in a single file or all the logic code is in a single JavaScript file. It can become very difficult to change anything. Sure, you could split it into smaller JavaScript files, but then you would need to manually add script tags, think of loading order and it will just slow down the initial load. It can just become very messy.

Now let's take it even a step further. What if you wanted to use JSX, Typescript, SASS, or any other similar tool? You could, but then you would need to manually set up compilers as those are not browser-supported.

Benefits of CLI-generated project

Just above, I mentioned using different tools when developing. Tools like Typescript and newer versions of JavaScript from the more popular on are not fully supported. For that, you would need to set up some compiler using the Webpack or something similar.
Thankfully Vue also has an npm package for creating a boilerplate project which would have all these tasks set up. Not only that but out of the box you get many more tools used for optimizations, lazy loading, structure guidelines, local server with hot-reaload while you are developing, testing setup, and many many more.

Dependencies (node, npm)

To use this you will need two tools. NodeJS and NPM, but if you install just Node, you get an NPM out of the box.

Step-by-step generating

Once you installed NodeJS, you can generate the new Vue project. You can do that by opening your terminal in the location where you want to create a project and run the next command.



npx create-vue@latest

During the run, there will be some prompts. At this moment, for this tutorial, choices are not important as we will not go into the project too deep. Also, you might notice I added @latest at the end of the command. That just means it will use the latest version of Vue.

Running the app

At the end of the logs above you can see a few commands. First, you will need to locate your terminal in the project folder. And then you need to run the npm install command. This installs all the dependencies used in your project. You won't need to do this every time, just when you change the dependencies again.
Other commands are:

npm run format runs prettifier and cleans up your code
npm run dev builds the application and starts the local server where you can see the output. When you run it, inside of the logs there will be a message saying which port is used.
npm run build creates a production-ready build of the application
npm run test:unit runs unit tests There are a few more tasks, but these are the most common ones and you can add your tasks as well.

Project structure

If you open the generated project, first you might notice some files in the root folder of the project. Those are mostly different configuration files like the gitignore, prettier, and environment variables files. Further on, there are some folders as well. First, there is node_modules, a folder containing all the npm dependencies you installed when running the npm install command. Another folder there is the public folder. When you generate a project it contains only favicon, but it could also contain other similar files like the robot.txt and manifest. The last folder there is the src folder. This is where all your application code will go, and if you look at it, it already has some structure for code guidelines there. There are assets for keeping your images and styling files, components for components, and views for your page components. If you choose to install a router when generating the project, there will also be a router folder with its initial configuration. You might notice that all the script files have a Vue extension. These are special files that are used for building vue applications and I will cover them more in the next post.

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.

VueJS part 7: Lifecycle methods

Kristijan Pajtasev — Tue, 10 Oct 2023 12:34:31 +0000

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. Every application and component has its lifecycle, and quite often it happens that we need to do something during some specific stage. That is why there are lifecycle methods. Functions that are executed in the specific stages of the application. In this post, I am covering which lifecycle stages of Vue are, and which methods you can use to access them.

Vue Lifecycle

beforeCreate

This method runs before anything starts in VueJS. Think of it as some action before there is an initialization object.
created

At this moment, there is an initialization object, but the template is still not compiled.

beforeMount

This stage is when your template is compiled but it is still not shown in your browser.

mounted

At this stage, the template has been compiled and shown in your browser. The moment that happens, this method gets triggered. This might be a place you might trigger if you need to access some HTML element from your component.

beforeUpdate

With the change of data, components do get changed. And if you want to take some action on it but before it gets re-rendered, this is a place to do it.

updated

Very similar to the beforeUpdate method, the difference is that this method runs when component data is updated and gets re-rendered.

beforeUnmount

Sometimes, components will get removed from your DOM. But you might want to do some cleanup tasks before such thing happens like clearing times. When the removing process starts, but before the component gets removed, this is the method that gets triggered.

unmount

Finally, the last step of the lifecycle is the unmount method. It runs once the component is completely removed from the DOM.

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.

VueJS part 6: Components introduction

Kristijan Pajtasev — Tue, 03 Oct 2023 12:57:30 +0000

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. Components are a very important part of Vue, and in this article, I am giving a brief introduction to what they are and how to use them.

What are components

In all of the posts so far, I just created the Vue application and mounted it to the specific element. However doing that would cause HTML to grow huge, and the application object would be overly populated with all the data and methods. Soon, it would become impossible to update it. So there is a need to exclude pieces of logic and structure into reusable sections. This is what components are. A reusable structure that can contain their structure with HTML, style with CSS, and logic with JavaScript. These are used as new custom HTML tags.

Creating the first component

For this introductory post, I am using a Vue loaded from CDN. Also, when creating the first component, there is one important thing I need to note. I am using the Vue version 3. This is important to note because in version 3, defining components slightly changed. In older versions, it was done on the global Vue object. Since version 3, you need to create a new Vue application, and then register components on that application.

const app = Vue.createApp({
  data() {
    return { }
  },
  methods: {
  }
})

As a first component, I will just make it a simple one, containing the hardcoded first and last name of the person. But before registering the component, we should create a configuration object for our directive. This object is quite similar to the initialization object of the app.

const PersonDetails = {
  template: `
    <div>
      <div>John, Doe</div>
    </div>`,
  data() {
    return { }
  },
  methods: { }
}

This would be among the simplest versions of this object. We have the methods object that would contain all our logic, which is empty above. Data function that returns data we might want to expose. And last is the template string. In future posts, I will cover better options to do those, but one way is to add a template property to the initialization object and add your template to it as a string.

Now that object is created, the component can be registered. That is done by calling the component function on the created Vue application.

app.component('PersonDetails', PersonDetails)

In the example above, I passed two parameters, the first one being the name of the component and the second being the component configuration object. For the name I chose to call it the PersonDetails, however, as an alternative to the same name I could have also called it person-details. This second version is the name of the tag I will use in the template. So to simplify it, components are named all lowercase, with dashes between words, but when registering them, dashes can be omitted with each word being capitalized.

<div id="app">
    <person-details></person-details>
</div>

As you can see above, using a component once it is registered, is just like using any other HTML element. Just a matter of using a tag with a component name. This will result in the template being rendered in its place.

Passing data to the component

Above, I just used hardcoded data to display the first and last names in the component. But that is not very reusable. And often you would want to pass some values to it. While that is something I will cover in more detail in some of the future posts, as component communication is a bigger topic. Still, I do want to touch a bit on the passing data.

Passing data is quite similar to the regular HTML elements. You just add attributes when using components. The difference with vue is that you should use vue bind to pass the value, and in the string, the value is a JavaScript expression.

<person-details :first-name="'John'" :last-name="'Doe'" />

The code above is an example of how that would look like. You can see I used a colon before the attribute name. That is a shorthand for the v-bind directive. The second thing to note is that I used single quotes inside of the double ones. That is because inside of the string is a JavaScript expression, so if you want to pass the hardcoded string value, then it needs to be wrapped into another quote. Otherwise, it will try to pass non non-existent variable called John.

Now that values are passed, we need to somehow consume them inside of the component. But for that, we need to first adjust the component to know it should expect such value. That is done by adding another property to the component configuration object. This property is called props, and its value is an array containing camel-cased names of attributes we are passing.

const PersonDetails = {
  template: `
    <div>
      <div>John, Doe</div>
    </div>`,
  data() {
    return {  }
  },
  props: ["firstName", "lastName"],
  methods: { }
}

This was just defining that we will pass those values, we are still not using them. To access them, you can use the this.$props value. There are multiple ways to expose it to the template, for simplicity this time, I will just use it in the data object and make it accessible with the same names as they are passed to the component.

const PersonDetails = {
  template: `
    <div>
      <div>{{firstName}}, {{lastName}}</div>
    </div>`,
  data() {
    return {
      firstName: this.$props.firstName,
      lastName: this.$props.lastName
    }
  },
  props: ["firstName", "lastName"],
  methods: { }
}

Apps vs Components

You might look at this and think, when would you want to use components and when apps. Apps can't communicate with each other, while there are ways for components. So if you are expecting code to work together, you probably want to create reusable components.

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.

VueJS part 5: Handling events

Kristijan Pajtasev — Tue, 26 Sep 2023 12:15:25 +0000

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In this one, I am covering how to use event handlers in the Vue.

On event directive

Vue comes with a directive that helps us handle many different types of events. That directive is a v-on directive. However, you can’t just write v-on, you need to tell somehow which type of event you are handling. You do that by adding a colon and event type after it.

v-on:[EVENT_TYPE]=”[HANDLER]”

This might be clearer with the example. So let's start with adding a function we can use for handling click events. In the initialization object, under methods, we can add the handleClick method.

Vue.createApp({
  data() {
        return {}
  },
  methods: {
    handleClick: function() {
      console.log("hello world")
  }
}).mount("#app")

Now if you want to use this in your HTML all you need to do is add that v-on directive to some element.
Click me

Handler code

In the example above, I used the handleClick() string as code for handling the event. However, there are some important things to note here. In the string, you can write your code, or you can use a reference to the function. If you are not passing reference to the function, then you could write one or more statements there, and imagine as if they are all wrapped in some function that Vue will run for you. This is important to understand for the next section where the event object is used.

<!--    function reference-->
<div>
    <button type="button" v-on:click ="handleClick">
        Click me
    </button>
</div>

<!--    method call -->
<div>
    <button type="button" v-on:click ="handleClick()">
        Click me
    </button>
</div>

<!--    single function call -->
<div>
    <button type="button" v-on:click ="console.log('hello')">
        Click other me
    </button>
</div>

<!--    multiple functions call -->
<div>
    <button type="button"
            v-on:click ="console.log('hello'); console.log('other hello'); if(true) { console.log('another') }">
        Click other me
    </button>
</div>

Event object

Quite often when working with the events, you want to access the event object. Maybe to get access to the target element, prevent default behavior, or something else. When using this directive that is also possible. If you are using function reference for your event handler, the first parameter of the function is going to be the event object. Otherwise, code written between quotes will have access to the event object through the $event variable.

Accessing the event object in HTML

<!--    access to the event -->
<div>
    <button type="button"
            v-on:click ="console.log($event);">
        Console event
    </button>
</div>

Accessing event in methods when passing method reference

As said earlier, if you use method reference as the event handler, then you will get the event as the first parameter of it.

<!--    function reference-->
<div>
    <button type="button" v-on:click ="handleClick">
        Click me
    </button>
</div>

Vue.createApp({
  data() {
    return {
    }
  },
  methods: {
    handleClick: function($event) {
      console.log($event)
    }
  }
}).mount("#app")

Passing parameters and the event object

If you remember, above I wrote that you can imagine statements in the event handler being wrapped into function by Vue that will be run when needed. The reason why I am mentioning it is that quite often in the event handler, you want to both use the event object and some other data. You could write everything in your HTML, but that wouldn’t be very clean. So you can call the method and pass to it both the event object and any extra data as the code in the quotes does have access to the event object as well.

<div>
    <button type="button"
            v-on:click.stop.prevent="logEvent($event, 'extra data')">
        Console event
    </button>
</div>

I don’t recommend using the following code, as it is redundant and not clean, but to illustrate the point above, you could also write it in this way.

<div>
    <button type="button"
            v-on:.stop.prevent="function($event) {logEvent($event, 'extra data')">)}">
        Console event
    </button>
</div>

Handler modifiers

There are some common actions you might want to do with your events. Like preventing default behavior, stopping event propagation, or running it only with the click of a specific button. This directive does support that as well. You do that by adding dot-separated modifiers after the event type. In the following example, it will both run stopPropagation and preventDefault event methods on every event.

<div>
    <button type="button" v-on:click.stop.prevent="handleClick">
        Click me
    </button>
</div>

As an additional example, in the below code, the event handler will run only if you click on it with the right mouse click. It also uses the prevent modifier to disable the default right-click popup.

<div>
    <button type="button" v-on:click.stop.prevent.right="handleClick()">
        Click me with right button
    </button>
</div>

Other event types

In all of the examples above, I always used the click event. This was for the simplicity of the examples. But you can use other events as well. Not only that. You can even use multiple event directives on the same element as well.

<div>
    <div>input element</div>
    <input v-on:input="handleInput"
           v-on:click="console.log('click')"
           v-on:keyup="console.log('key up event')"
           v-on:keyup.enter="console.log('key up enter event')"
           v-on:click.prevent.right="console.log('right click')" type="text"/>
</div>

Alternative writing

If you are using a lot of event handlers, writing v-on: all the time can be repetitive. And in the Vue version 3, an alternative syntax was introduced. Instead of using the v-on:, you can replace it with the @ sign. Both options are fine, I would only suggest choosing one and sticking with it for consistency and using it everywhere in your project.

<div>
    <button type="button" @click="console.log('using @')">
        Using @ syntax
    </button>
</div>

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.

VueJS part 4: Rendering in loop

Kristijan Pajtasev — Thu, 21 Sep 2023 19:22:36 +0000

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In this one, I am covering how to use loops to render content.

Directive v-for

Displaying lists is quite common when building web applications. The problem with it is that most often we don’t know ahead of time how many items there are. And even if we did, repeating all that content manually would be crazy. That is why Vue has the v-for directive. You add it to the element, give it an array of items, and it will render content inside of it for each array element.

v-for example

For example, let's display a list of people with their first name, last name, and dob. Therefore, we need that list in the application data.

{
  data() {
    return {
      people: [
        {
          id: 1,
          firstName: "John",
          lastName: "Doe",
          dob: "01-01-1980"
        },
        {
          id: 1,
          firstName: "Johny",
          lastName: "Doe",
          dob: "01-01-1980"
        },
        {
          id: 1,
          firstName: "James",
          lastName: "Doe",
          dob: "01-01-1980"
        }
      ]
    }
  },
  methods: {}
}

Then to display it in the HTML, it is just a matter of adding it to the v-for directive.

<ul>
    <li v-for="person in people" >
        <div>{{person.firstName}} {{person.lastName}} - {{person.dob}}</div>
    </li>
</ul>

Using index in the loop

It is common to use a current index when looping through the array. And that is something that you can access with the v-for directive. In the code above, you can notice that I used syntax person in people. Other than person, the second argument you can use is index.

<li v-for="(person, index) in people" >
    <div>{{index}}. {{person.firstName}} {{person.lastName}} - {{person.dob}}</div>
</li>

Key attribute

When displaying values in the HTML, Vue will update changed values. However, with the arrays, it is a bit tricky, and you can help Vue to know which elements are updated so they can be properly and efficiently displayed. You do that by adding a key attribute to the element containing the v-for directive. Value for this attribute should be set with the v-bind directive and it should be something unique to that element, like database id.

<li v-for="(person, index) in people" v-bind:key="person.id">
    <div>{{index}}. {{person.firstName}} {{person.lastName}} - {{person.dob}}</div>
</li>

Using the v-if directive with the v-for

If you are displaying only some elements, you should not use the v-for and the v-if directive on the same element. But you can use the v-if on the first element inside of the element using the v-for directive. An alternative to this would be my preferred method, first using the filter method on the data, and then displaying the new filtered array.

<ul>
    <li v-for="(person, index) in people" v-bind:key="person.id">
        <div v-if="index % 2 === 0">{{index}}. {{person.firstName}} {{person.lastName}} - {{person.dob}}</div>
    </li>
</ul>

Using range

A quite common requirement in the building of web applications is to display something for a range of numbers. This is also supported by the v-for directive. The usage difference is that instead of passing an array, you give a maximum number. Then each element in the loop is one number of the range starting with the one.

<ul>
    <li v-for="n in 10">
        {{n}}
    </li>
</ul>

Looping object

Other than looping on arrays, this directive can loop on the object, by giving one of the object properties in each iteration. For an example of this, we can just use one of the elements in the previously used array.

{
  data() {
    return {
      person: {
        id: 1,
        firstName: "John",
        lastName: "Doe",
        dob: "01-01-1980"
      }
  },
  methods: {}
}

Using it in the directive is almost the same as if it were an array. With just one difference. In each iteration, we get three parameters. While in the case of an array, we get the element and the index, in this case, we get property value, property key, and index.

<!--    object -->
<ul>
    <li v-for="(value, key, index) in person">
        {{value}} {{key}} {{index}}
    </li>
</ul>

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.