What is Component Preview

[johnsoncodehk]

NOTE: After v1.1.0, this features is moved to https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-vue-preview.

---

With this feature you can see your components live in your VSCode editor and the changes you make to them.
It uses https://github.com/antfu/vite-plugin-vue-markdown to render the markdown in your vue components directly in your VSCode editor.

:::warning
This feature is currently only available if you are using Vite
:::

Setup

1. You need to install vite-plugin-vue-component-preview (version >= 0.2.0) to your project, and make sure follow readme setup.

2. Update to latest Volar version v0.38.2.

Usage

1. Open a .vue file in your project.

2. You can now write markdown inside <preview lang="md"></preview> tags in your component which will be rendered as preview.

3. Open VSCode explorer view, you should see the "Vue Component Preview" tab.

4. Drag the component preview view to right down or any other side you want.

Now the preview view will update instantly when you open other .vue files, you can also press "Alt" to use the goto code feature in preview view.

If the preview view is too small for you component in VSCode, you can preview component in browser by click the right top Vite icon > select "Preview Component in External Browser".

If this feature design doesn't fit your project, you might be interested in Preview.js.

Example project: https://github.com/johnsoncodehk/volar-starter

[Suyashtnt]

How does this work with nuxt 3? I cannot seem to get any of the goto code stuff working

plugins/devtools.ts

import { defineNuxtPlugin } from "#app";
import Previewer from "virtual:vue-component-preview";

export default defineNuxtPlugin((app) => {
  app.vueApp.use(Previewer);
});

and nuxt.config.ts

import { quasar } from "@quasar/vite-plugin";
import Preview from "vite-plugin-vue-component-preview";
import Inspect from "vite-plugin-inspect";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr: false,
  telemetry: true,
  css: [
    "@quasar/extras/roboto-font-latin-ext/roboto-font-latin-ext.css",
    "@quasar/extras/mdi-v6/mdi-v6.css",
    "@quasar/extras/material-icons/material-icons.css",
    "@quasar/extras/animate/slideInUp.css",
    "@quasar/extras/animate/slideOutDown.css",
    "~/assets/styles/quasar.sass",
  ],
  build: {
    transpile: ["quasar"],
  },
  modules: [
    "@unocss/nuxt",
    "@vueuse/nuxt",
    "@pinia/nuxt",
    "@nuxtjs/robots",
    "nuxt-purgecss",
  ],
  robots: {
    UserAgent: "*",
    Disallow: "/",
  },
  unocss: {
    attributify: true,
  },
  vite: {
    define: {
      "process.env.DEBUG": false,
    },
    plugins: [
      Inspect(),
      Preview(),
      quasar({
        sassVariables: "assets/styles/quasar.variables.sass",
      }),
    ],
  },
  experimental: {
    reactivityTransform: true,
  },
  typescript: {
    strict: true,
    shim: false,
    tsConfig: {
      compilerOptions: {
        types: [
          "node",
          "vite/client",
          "vite-plugin-vue-component-preview/client",
        ],
      },
    },
  },
});

[johnsoncodehk]

Do goto code working with just preview Nuxt 3 App to you? (Forget vite-plugin-vue-component-preview first)

[Suyashtnt]

It did not for me. Maybe I'm controlling it wrong as well though