When using composition API, we declare functions inside the setup() function instead of methods. The function is then returned by the setup() function to be used in the template of the component. In this article, we will look at how to declare and use these functions instead of methods. We will begin by creating a new application using Vue CLI. ❯ vue create composition-function-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application....
How to declare data in composition API? Vue.js
When using composition API, we can make use of two functions ref and reactive to declare data in the Vue.js application. In this article, we will look at both functions with examples. We will begin by creating a new application using Vue CLI. ❯ vue create data-composition-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application. ❯ cd data-composition-demo ❯ npm run serve This will run our server on port 8080 by default http://localhost:8080/...
How to Send Query Parameters in Vue.js?(examples)
The query parameters are key-value pairs that you see in a URL after the ? symbol. https://example.com/search?q=dogs&time=week If we are using the <router-link> component, we can pass the query parameters using the:to attribute. <router-link :to="{path:'/products',query:{id: 1}}"> Product </router-link> The :to attributes takes router object with query key where we can define all the query parameters. To set the query parameters dynamically, we can make use of the $router.push() method....
How To Implement Named Routes in Vue.js? (With Examples)
Named routes are useful when want to refer to routes by name instead of URL. In Vue.js, we can make use of the name property in router configuration to provide a name to a specific route. const router = createRouter({ history: createWebHistory(), routes: [ { path: "/my-component/:id", component: MyComponent, name: "myComponent", }, ], }); In this article, we will look at how to implement named routes in a Vue.js application....
How to implement a 404 page in Vue.js?(Catch all)
In this article, we will look at how to implement a catch-all route to handle the page not found error and display a custom 404 page in the Vue application. In the router configuration, we can specify a path /:notFound and also define a NotFound component to display the 404 custom page. const router = createRouter({ history: createWebHistory(), routes: [ { // ... }, { path: "/:notFound", component: NotFound, }, ], }); The /:notFound will match any string in the URL and display the NotFound component....
How to redirect to a different URL in Vue.js?
In this article, we will look at how to redirect to another page using the routes configuration. For this, we make use of the redirect option and set it’s value to redirecting URL. For example, const router = createRouter({ history: createWebHistory(), routes: [ { path: "/", redirect: "/products", }, { //.... }, ], }); With the above configuration, a user visiting the / URL will be redirected to /products page....
How to pass dynamic route parameters as props in Vue.js?
In Vue, it is possible to pass dynamic route parameters as props. In this article, we will at how to implement them with an example. We will begin by creating a new application using Vue CLI. ❯ vue create props-params-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application. ❯ cd props-params-demo ❯ npm run serve This will run our server on port 8080 by default http://localhost:8080/...
How to implement dynamic routes in Vue.js? (with examples)
In this article, we will look at how to implement dynamic routes in Vue application using the vue-router package. We will begin by creating a new application using Vue CLI. ❯ vue create dynamic-routes-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application. ❯ cd dynamic-routes-demo ❯ npm run serve This will run our server on port 8080 by default http://localhost:8080/...
How to navigate to a different page on button click in Vue.js?(Programmatic Navigation)
We can navigate to a page when a button is clicked by using the $router property provided by the vue-router package. Specifically, $router comes with a push method that can be used for navigation to a different page. Let us look at an example to see how this works. We will begin by creating a new application using Vue CLI. ❯ vue create programmatic-navigation-demo Once, the installation is complete, we can navigate to the folder and run the server to load the application....
How to style an active link in Vue.js? (with examples)
When using the <router-link> component of vue-router, it automatically applies two CSS classes called .router-link-active and .router-link-exact-active. The .router-link-active class gets applied even if there is a partial match in URL whereas, .router-link-exact-active gets applied only when there is an exact match of the path. In this article, we will look at how to style an active link using the .router-link-active class. We will begin by creating a new application using Vue CLI....