Use SvelteKit 1.0.0 to load data from The Movie Database with async - Approach 1: Using Loading data SvelteKit docs

+page.js

/** @type {import('./$types').PageLoad} */
export async function load() {
  const api_url = 'https://api.themoviedb.org/3/movie/popular?api_key=<your_api_key>&language=en-US&page=1'
  const response = await fetch(api_url)
  const data = await response.json()
  if (response.ok) {
    return {
      popular: data.results
    };
  } else {
    throw new Error(data);
  }
}

+page.svelte

<script lang="ts">
    /** @type {import('./$types').PageData} */  
    export let data: any;
    
    console.clear()
    // console.log(`popular_movies: ${JSON.stringify(data.popular)}`);
    console.log(`first_title: ${data.popular[0].title}`); 
    console.log(data.popular);
</script>

Instructions:

1. Place these 2 files in your primary routes folder.
2. In +page.js, replace <your_api_key> with your api key from The Movie Database (TMDB).

References:

YouTube: SvelteKit For Beginners | Movie App Tutorial

Loading data • Docs • SvelteKit

TMDB: API Documentation > Movies > Get Popular

npm list:

├── @playwright/[email protected]
├── @sveltejs/[email protected]
├── @sveltejs/[email protected]
├── @typescript-eslint/[email protected]
├── @typescript-eslint/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]