Changing components dynamically using Vuetify, Vue and Typescript
In this post am going to share with you how to navigate from one component to another using Vue,Vuetify and Typescript.
We need to have four components the landing component called LandingPage.vue, the parent called Home.vue and two child components called About.vue and Contact.vue that will be displayed and changed dynamically.
Let’s get started:
Step 1: Create Home.vue component
Step 2: Create About.vue component
Step 3: create Contact.vue component
Step 3: Create LandingPage.vue component
In the Landing page that is where we import the Home.vue component which going to be the parent of About.vue and Contact.vue
Step 4: Modifying the Home.vue component
We need to declare a variable called componetName that will be a placeholder for the actual components that we need to access dynamically
We need to create a method called showComponent that will be used to instantiate the componentName
We need to have a parameter in the showComponent called values (this can be given any name) assign it to a type of any. In the method below, when the values is equal to about it will access the about component same with when values is equal to contact.
Step 5: In your Vue section, create two buttons that will be used to navigate to and fro about and contact components
Step 6:
Lastly use the component tag and bind :is to componetName to access About.vue and Contact.vue dynamically.
Your final Home.vue code should look like below
The last results will show like snippets below:
- Navigating to the About component
2. Navigating to Contact component
There you have it, accessing different components in Vue,Vuetify and Typescript dynamically. Hopefully you find this useful as you take a journey in codding in the above mentioned technologies. Happy Codding.
