Preview Vue and Nuxt components in VS Code

Timeful runs a live Vite server to preview the open Vue component in isolation at specific screen sizes. Auto-reloads on changes and supports your project's Vite configuration and plugins.

Install VS Code Extension

Works with:

Preview multiple screen sizes

Select a screen size from a list of common sizes or use a responsive size.

Use your Vite config and plugins

Timeful starts the Vite server for the preview using the config file in your project

Supports SSR apps

Timeful automatically handles SSR for components that use SSR such as Nuxt server islands.

Runs your app's setup code

Timeful runs the setup code for your Vite or Nuxt app so you can provide global context or custom setup code.

View server logs in Output

The logs for the preview Vite server are streamed to the Output tab in VS Code.

Automatically disabled in untrusted workspaces

The extension only runs in trusted workspaces for your security.