Posts

In this article, we will look at how to create our first svelte component. We will begin by creating a basic project structure using the Svelte + Vite template. Let’s run the below command to create the project folder. npm create vite@latest first-component-svelte-project -- --template svelte This will create a folder first-component-svelte-project in your current working directory. Feel free to change it to any name you would like for your svelte project....

In this article, we will look at how to create our first svelte application from scratch. Install Node.js It is important to note that Svelte requires Node.js to be installed in our system. If you do not have it installed, you can install it using the official Node.js website https://nodejs.org/en Creating your first Svelte application For this tutorial, I will be using the Svelte + Vite template to set up the basic project structure....

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

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

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

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

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

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

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

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