SvelteKit

FRONTEND

npm create svelte@latest opiic2024

cd opiic2024

npm install

npm run dev -- --open

routes (address bar)

routes (button)

<a href="/">

<button>Home</button>

</a>

Bootstrap 5.3

npm install bootstrap

src/routes/+layout.svelte

<script>

import "bootstrap/dist/css/bootstrap.min.css"

</script>

<slot />

src/routes/stores.js

import { writable } from "svelte/store";

export const count = writable(1010);

export const user = writable({

name: 'nizam',

age: 54,

email:'mnizam03@gmail.com',

password: 2345,

})

call stores like:

import {count, user} from "../stores"

function onUpdateCount(){

$count = $count + 5

}

function updateUser(){

$user.name = "Mohammad Nizam"

$user.age = 20

}

display stores value like:

<h2>Count: {$count}</h2>

<h3>User: {$user.name}</h3>

npm i axios

import { onMount } from "svelte";

import axios from "axios";

onMount(async function () {

try {

const response = await axios.get(endpoint);

console.log(response.data);

posts = response.data;

} catch (error) {

console.error(error);

}

});

Page updated

Report abuse