Posts

In Svelte, we can use the <svelte:component> directive to render components dynamically. In this article, we will create a Svelte project and render dynamic components. Project Setup Let’s create a basic project structure using the Svelte + Vite template. Run the below command to create the project folder. npm create vite@latest dynamic-components-svelte-project -- --template svelte This will create a folder dynamic-components-svelte-project in your current working directory. Feel free to change it to any name you want for your svelte project....

In Svelte, we can bind the input’s value attribute to a variable. The value of the input is stored in this variable. Any changes made to the input’s value will be reflected in the variable. We can get the input’s value by simply making use of this variable. This way Svelte provides a two-way binding between the state, that is, the variable and the input value. To establish this binding we make use of bind:value attribute....

In this article, we will look at how to pass data from parent to child components in Svelte. In Svelte, we can pass data from parent to child components using props. Props are properties that allow the parent to pass data to its child components. Components receive props as parameters, which are data passed from the parent component. Consider the below example: ParentComponent.svelte: <script> let message = "Message from Parent!"; </script> <ChildComponent msg={message} /> ChildComponent....

In this article, we will look at how to output JavaScript variables in Svelte. 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 variables-svelte-project -- --template svelte This will create a folder variables-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 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....