nuxt/movies

🍿 A TMDB client built with Nuxt 3

Nuxt Movies

Movies app demo built using Nuxt 3, Vue 3, UnoCSS, Image Module, The Movie Database API and TypeScript.

🍿 Live preview: https://movies.nuxt.space

Screenshots

Proxy Server

Check proxy/README

Setup

# Enable pnpm
$ corepack enable

# Install dependencies
$ pnpm install

# Start dev server with hot reload at localhost:3000
$ pnpm dev

Credits

Based on jasonujmaalvis/vue-movies and tastejs/nuxt-movies.

Data provided by The Movie Database.

This project uses the TMDB API but is not endorsed or certified by TMDB.

movies's Issues

After the initial loading (server side), the page will be empty after a few seconds.

@antfu

[Question] How to resolve those errors?

[Questions] Refresh or enter the website for the first time, causing an error in the request

The first time you enter or refresh a website, you will get this error. Then click on any of the other links, and the page will normally display.

Command line

[Vue warn]: Unhandled error during execution of setup function at <AutoQuery key="tvpopular" query= { type: 'tv', title: 'Popular TV Shows', query: 'popular' } >

[nitro] [dev] [unhandledRejection] FetchError: request to https://movies-proxy.vercel.app/tmdb/tv/popular?page=1 failed, reason: connect ETIMEDOUT 31.13.75.12:443 ()

use Shared Element Transition API

particularly when navigating into a movie + out again, could be nice to use Shared Element Transition API to make it smooth and beautiful

首页初始化加载或刷新，接口报错

国内拉取启动项目，首页加载报错，是国内请求https://movies-proxy.vercel.app接口有点问题吗？但是点击错误页面上Go Back按钮，页面又能正常显示了。不管是否开启VPN启动项目，首页初次加载或者刷新都不显示内容

APIs are called twice

Once on the server side, once on the client side.
But if useAsyncData is used, this problem does not exist.

G

Scroll to top on route changes

We need to set a default to scroll to top

Reactivity transform will be dropped

Many places in the code use reactivity transform feature. $ref, $computed etc.

Reactivity Transform will be dropped (but will be made available via a separate package to support compatibility for those who want to still use it).

vuejs/rfcs#369 (comment)

My opinion, that would be must refaktoring these codes.

🖖

Scrolling is not smooth

Title: Scrolling Not Smooth Bug on Website

Description:
There is an issue with the scrolling functionality on the website, which is causing a lack of smoothness during scrolling. This bug needs to be addressed and fixed in the repository.

Expected Behavior:
The scrolling should be smooth and responsive, allowing users to navigate through the content seamlessly.

Actual Behavior:
The scrolling is not smooth and feels jumpy or laggy. There is a noticeable delay or inconsistency in the scrolling motion, which affects the overall user experience.

Additional Information:

• The issue is reproducible across different web browsers (chrome and safari too).
• The problem persists on various devices (Mac and windows ) but in linux its working smooth.
• No JavaScript errors or console warnings are displayed.

When use Layouts

Hello, I wanted to implement this model to use it with layouts, to create a login, when doing so I delete the app.vue file and put it there in layouts/custom.vue it stays in an infinite loop, any suggestions?

Progress Tracker

• Rewrite from https://github.com/tastejs/nuxt-movies in Nuxt 3
• 404 Pages and better naivgation @antfu
• Add readme @antfu
• Performance and a11y improvements
• Nuxt Image module

Discussions

• Should we do some redesign?
• It uses https://github.com/antfu/nuxt-server-fn, what should we do about it?

The width of the input box is not enough

Hello, the width of this input box is not enough, and it is not fully displayed.

See the demo site has a bad experience, you can watch the video below

2023-06-29.22.30.16.mov

It is in the list page, when you click the movie cover and jump to the detail page, it will go back to the top first and then to the detail page, which is a bit bad experience.

Carousel scroll button bug

The carousel scrollLeft and scrollRight button moving the carousel all the way to the left and right respectively.

My Family App Repo

Suggestions to support i18n

It would be great if the site could support i18n.
Since the tmdb api supports multiple languages, I guess it might not be too expensive.
Movie-related information (eg posters) may be localized differently and is well supported in tmdb, which is very important for non-English site visitors.

Top image is blur on a retina computer

I guess we should add another size to not be blur

APIs are called twice

Once on the server side, once on the client side.
But if useAsyncData is used, this problem does not exist.

Suggestion to add language switcher

It can already detect the browser's default language. Isn't it nice to have a locale switcher menu to change?

Remember scroll position when navigating back from the detail view to the main page

Would it be possible to add the code to remember the scroll position when navigating back to the home page after viewing a detail page? Right now, when you scroll down on the home page, find a movie, click it to view details, then use the back button, it brings you back to the top of the home page instead of where you left off.

This is something I'm struggling with in my own nuxt3 project and would love to see how it can be done properly.

NSFW results in the search page

I am sure these are great films but I was looking for the tv show the office with the query office.

I would suggest to filter results from The Movies DB to avoid fetching adult movies.

https://movies.nuxt.space/search?s=office

Cloudflare Pages Deploying issue

error.vue $computed not found and no includes property on computedRef

Hi,

I copied the error.vue page into my own project from the Mastering Nuxt 3 course. It does not work for me.

I added lang="ts" to the script tag and ts errors tells me 2 things wrong.

Cannot find name $computed. Did you mean computed?

and

Property 'includes' does not exist on type computedRef referring to message?.includes

If I remove those it works.

const message = computed(() => String(props.error?.message || ''))
const is404 = computed(() => props.error?.statusCode === 404)

bug: flash of unstyled content

On visiting the website or refreshing there is a flash of unstyled content (FOUC).

brave_Vm57vFFZhV.mp4

Movie details page and search broken

I was looking for inspiration and I came back to the site and the search and movie details page are now broken.

Search loop infinitely:

Movie page doesn't load: