Giter VIP home page Giter VIP logo

vuepress-plugin-vue-example's Introduction

vuepress-plugin-vue-example


๐Ÿ”ฅ HEADS UP! You're currently looking at vuepress-plugin-vue-example branch for Vuepress 1.
If you're looking for a Vuepress 2 compatible version of vuepress-plugin-vue-example, please check out the next branch.


A Vuepress plugin to display Vue components' live examples and source code inside documentation.

Features

  • Easy to use, with just a single vue-example tag inside .md or .vue files
  • Uses the built-in syntax highlighting features of Vuepress
  • Displays a fully-working live example
  • Splits source code in separate sections for template script and style
  • Capability to strip comments from the source code
  • Capability to add custom code before each section using slots
  • Includes expand/collapse feature in order to save space

Browsers support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

Documentation and examples https://vuepress-plugin-vue-example.netlify.app/

vuepress-plugin-vue-example's People

Contributors

kouts avatar semantic-release-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vuepress-plugin-vue-example's Issues

Error importing VueExampleHighlight component from VueExample

"dependencies": {
    "vue": "^3.2.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.2.0",
    "@vuepress/bundler-vite": "^2.0.0-beta.37",
    "@vuepress/plugin-search": "^2.0.0-beta.37",
    "postcss": "^8.4.12",
    "postcss-calc": "^8.2.4",
    "postcss-inline-svg": "^5.0.0",
    "postcss-preset-env": "^7.4.3",
    "postcss-scss": "^4.0.3",
    "postcss-simple-vars": "^6.0.3",
    "rollup-plugin-copy": "^3.4.0",
    "sass": "^1.49.10",
    "style-dictionary": "^3.7.0",
    "typescript": "^4.5.4",
    "vite": "^2.8.0",
    "vue-tsc": "^0.29.8",
    "vuepress": "^2.0.0-beta.37",
    "vuepress-plugin-vue-example": "^2.0.1"
  },

image

image

[plugin:vite:import-analysis] Failed to resolve import "./VueExampleHighlight" from "node_modules/vuepress-plugin-vue-example/src/VueExample.vue". Does the file exist?
[/Users/victorneves/_mycode/yello-ui/node_modules/vuepress-plugin-vue-example/src/VueExample.vue:120:34]()
2  |  // SVG icons from // https://tablericons.com/
3  |  import { loadComponent, loadComponentAsString } from '@temp/loadComponent'
4  |  import VueExampleHighlight from './VueExampleHighlight'
   |                                   ^
5  |  import { markRaw } from 'vue'

Cannot use import statement outside a module

After 50 version of vuepress, their use esm modules link and is not worked with vuepress-plugin-vue-example

(node:54649) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
(node:54649) UnhandledPromiseRejectionWarning: /Users/foobar/projects/shared-front/node_modules/vuepress-plugin-vue-example/src/index.js:1
import { getDirname, path } from '@vuepress/utils'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:199:29)
    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)
    at async Loader.import (internal/modules/esm/loader.js:178:24)
    at async loadUserConfig (file:///Users/foobar/projects/shared-front/node_modules/@vuepress/cli/dist/index.js:77:18)
    at async CAC.dev (file:///Users/foobar/projects/shared-front/node_modules/@vuepress/cli/dist/index.js:460:52)
(node:54649) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:54649) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
/Users/foobar/projects/shared-front/node_modules/vuepress-plugin-vue-example/src/index.js:1
import { getDirname, path } from '@vuepress/utils'
^^^^^^

This code fix it

// package.json
"type": "module"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.