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/...

To pass data from parent to child components, we use props in Vue. But as the application gets complex we may end up having deeply nested components. This means, passing props in every component in the nested chain till the end component gets the data. In Vue, we can use the provide and inject feature, which can help us avoid using the props to pass data when dealing with deeply nested components....

The data flow in Vue is unidirectional. What this means is data flows from parent to child components using props. In case, we want to pass information from the child to the parent component we make use of the $emit method. $emit is a method in Vue used for passing information from child to the parent component. The way it works is $emit method is used to call a custom event from the child component which gets handled by the parent component....

To pass dynamic props in Vue we make use of v-bind. If the props are not bind using v-bind, it treats the values as static values i.e, it interprets it as strings. For example, <MyComponent subscribed="333" /> Here, subscribed is passed as static value. If you want Vue to treat it as a Javascript expression, use v-bind. <MyComponent v-bind:subscribed="333" /> or using shorthand: <MyComponent :subscribed="333" /> Let’s look at dynamic props in more details by creating a Vue CLI application....

We can validate props in Vue by declaring them as an object rather than an array. In this object, we can specify our requirements like the type of value it should hold or the default value it should have, and so on. For example, export default { props: { firstName: { type: String, required: true, }, lastName: String, }, }; In this case, we have firstName property which should be of type string and it is compulsory to declare it....