Nuxt Movies

screenshot of Nuxt Movies

Nuxt Movies

Nuxt.js Movies - a TMDB client optimized for Core Web Vitals


The "nuxt-movies" is a web application built using Nuxt.js and Vue.js. It utilizes The Movie Database (TMDb) API to fetch movie data. This version of the application has been developed by the Nuxt and Chrome teams, based on the initial work done by


  • TMDb API Integration: The application integrates with The Movie Database (TMDb) API to fetch movie data such as title, release date, genre, and ratings.
  • Vue.js and Nuxt.js: The application is built using Vue.js and Nuxt.js frameworks, which provide a seamless development experience and optimize performance.
  • YouTube API Integration: (optional) The application can also fetch video data related to movies by incorporating the YouTube API.
  • Environment Variable Configuration: The application utilizes environment variables, which can be easily configured by copying the provided .env.sample file and renaming it to .env.


To install and set up the "nuxt-movies" theme, follow the steps below:

  1. Copy the provided .env.sample file and rename it to .env.
  2. Get your TMDb API key by signing up for an account on The Movie Database website ( and generating an API key.
  3. (optional) Get your YouTube API key if you wish to fetch video data related to movies.
  4. Open the .env file and enter your TMDb API key and (optional) YouTube API key into their respective fields.
  5. Save the .env file.

To run the application:

  1. Open a terminal/command prompt in the project directory.
  2. Run the following command to install the required dependencies:
    npm install
  3. Once the dependencies are installed, start the application by running the command:
    npm run dev
  4. The application should now be running locally on your machine. You can access it by opening a web browser and navigating to the specified local URL.


The "nuxt-movies" is a web application developed using Nuxt.js and Vue.js. It leverages the TMDb API to fetch movie data and provides features such as movie search, genre filtering, and detailed movie information. By following the provided installation instructions, users can easily set up and run the application locally.


nuxt.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.


SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.


ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.