In this article, we will look at how to work with blur event in Vue using the v-on:blur or @blur directive with examples. We will begin by creating a new application using Vue CLI. ❯ vue create blur-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application. ❯ cd blur-demo ❯ npm run serve This will run our server on port 8080 by default http://localhost:8080/...
In this article, we will look at how to work with the <input> element to create radio buttons in Vue. We will begin by creating a new application using Vue CLI. ❯ vue create radio-button-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application. ❯ cd radio-button-demo ❯ npm run serve This will run our server on port 8080 by default http://localhost:8080/...
In this article, we will look at how to work with the input element to create checkboxes in Vue. We will begin by creating a new application using Vue CLI. ❯ vue create checkbox-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application. ❯ cd checkbox-demo ❯ npm run serve This will run our server on port 8080 by default http://localhost:8080/...
In this article, we will look at how to work with the <select> element to create dropdown list in Vue. We will begin by creating a new application using Vue CLI. ❯ vue create dropdown-select-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application. ❯ cd dropdown-select-demo ❯ npm run serve This will run our server on port 8080 by default http://localhost:8080/...
Teleport is a functionality in Vue using which we can display a content of a component in a different location which is not part of the HTML hierarchy of that component. Basically, we teleport a template content of a component to a different location in the DOM tree which is outside of the component. Let’s look at how teleport works in Vue with an example. We will begin by creating a new application using Vue CLI....
When using dynamic components, the component is not cached i.e, Vue does not preserve the state of the dynamic component. Hence, when switching between dynamic components, the state of a component gets unmounted. To solve this, Vue makes use of the <KeepAlive> component to preserve the state of the dynamic component even when switching out of it. Let’s understand the keep-alive feature with an example. We will begin by creating a new application using Vue CLI....
Dynamic components in Vue are components that are rendered dynamically depending on certain conditions or business logic. To render components dynamically, Vue uses a special tag <component> along with is attribute. <component :is="currentComponent"></component> Where, is attribute contains the name of the component that needs to be rendered. Let’s look at an example to understand it better. We will begin by creating a new application using Vue CLI. ❯ vue create dynamic-components-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application....
Slots are used when you want to pass template content from the parent component to the child component. Slots are useful when you want to render different content wrapped in a common outer structure. This common outer structure is defined in the child component and template content to be rendered within is passed from the parent component. To specify a slot in the child component, we make use of the <slot> element....
The style tags in components are global. Any style you apply in a component file will be applicable to the entire application. There are times when you want to apply some styles to only certain components. In Vue, we can make use of the scoped attribute and apply styles only to that particular component and its children. In this article, we will look at how to declare and use scoped attribute to style the components....
There are two ways of registering components in Vue. Globally Locally In this article, we will look at how to declare and use components both locally and globally. We will start by creating an application using Vue CLI. ❯ vue create local-global-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application. ❯ cd local-global-demo ❯ npm run serve This is run the server on port 8080 http://localhost:8080/...