Vuecode it is a component to show the code without complication

Overview

vuecode

Browser Support

Recent versions of Firefox, Chrome, Edge, Opera and Safari. IE10+

Quick-start CDN

<!DOCTYPE html>
<title>vuecode demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuecode.js/dist/vuecode.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuecode.js/dist/vuecode.css">

<div id="app">
  <vuecode title="Add new proyect vuecode">
    <div slot="demo">
      <button class="btn" type="button" name="button">Example</button>
    </div>

    <div slot="code">
```js{1,6}
var btn = document.querySelector('.btn')

btn.addEventListener( 'click' , function(){
console.log('click')
})
``/`
    </div>
  </vuecode>
</div>

<script>
new Vue({
}).$mount('#app')
</script>

CDN

Install en Proyecto NPM

# npm
npm install vuecode.js
# yarn
yarn add vuecode.js

Use

import Vue from 'vue'
import Vuecode from 'vuecode.js'

import 'vuecode.js/dist/vuecode.css'
Vue.use(Vuecode)

Become a Patron

Vuecode is an open source MIT project if you want to contribute to keep improving, If you are interested in supporting this project, please consider becoming a patron. [patron]

Lusaxweb

This library was created and is supported by Lusaxweb

License

MIT

You might also like...
Fast and lightweight library helps you to update js objects without mutating them

immhelper Fast and lightweight library helps you to update js objects without mutating them Install with npm npm install immhelper --save Features Ex

clean-react is basically React without all the garbage 🗑️

clean-react-app clean-react-app is basically React without all the garbage 🗑️ It generates a create-react-app without all the garbage. A clean app to

Based on the docs to provide code prompt files for vue component library

components-helper Based on the documents to provide code prompt files for vue component library Reference documents format reference test files Change

vue-easteregg - Easey add an easteregg to your vue app (default with konami code)

vue-easteregg ADD an easter egg to your vue app ;) template div id="app" {{ title }} easteregg @easter="test" :eggs="eggs" duration="50

A repository to bootstrap Figma low code projects
A repository to bootstrap Figma low code projects

Figma-Low-Code Figma-Low-Code is an OpenSource project, that allows to use Figma designs directly in VUE.js applications. The low code approach reduce

🗂  Source code for The Vue 3 Masterclass
🗂 Source code for The Vue 3 Masterclass

🗂 Source code for The Vue 3 Masterclass

Scan your vaccination, test and recovery certificates in QR code representation and save them to your Apple Wallet
Scan your vaccination, test and recovery certificates in QR code representation and save them to your Apple Wallet

This web application offers the possibility to scan the EU-wide vaccination, test and recovery certificates (namely EU Digital COVID Certificate) as Q

Online code runner, works like Codepen

online-code-runner Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build L

实现最简 vue3 模型( Help you learn more efficiently vue3 source code )
实现最简 vue3 模型( Help you learn more efficiently vue3 source code )

CN / EN mini-vue 实现最简 vue3 模型,用于深入学习 vue3 Usage B 站 提供了视频讲解使用方式 想看更多关于 mini-vue 的课程可以加我 vx 哦 加我的公众号:阿崔cxr 公众号回复关键字:vx Why 当我们需要深入学习 vue3 时,我们就需要看源码来学习

Comments
Owner
Lusaxweb
Lusaxweb
A Vue component to show status indicator as colored dots.

Status Indicator · A Vue component to show a status indicator as colored dots. This is a fork of status-indicator with a few changes for use it with V

Javier Diaz Chamorro 159 Sep 25, 2022
Vue component provides textarea with automatically adjustable height and without any wrappers and dependencies

vue-textarea-autosize The plugin for Vue.js provides the Vue component implements textarea with automatically adjustable height and without any wrappe

Devstark 126 Dec 9, 2022
👋 Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an event with current selection and on creation. Good for GDPR requirements.

vue-cookie-accept-decline Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an ev

Promosis, Inc. 124 Dec 18, 2022
Minimal project to show the linting error when accessing data from computed property (vetur + ts)

Minimal project to show the linting error when accessing data from computed property (vetur + ts)

Kirian Guiller 0 Jan 2, 2022
A Vue.js plugin to show comments related to an identifier

A Vue.js plugin to show comments related to an identifier. This identifier is called projectId internally but since this component is written with a dynamic mindset you can provide your own actions to deal with CRUD operations on comments.

3YOURMIND 6 May 12, 2021
Demo vue.js app to show Alchemy NFT API

A simple vue.js app made to play with Alchemy API

FranPandol 1 Aug 2, 2022
A Webpage build with Nuxtjs and Vuetify to easily show and switch between multiple OpenAPI descriptions

OpenAPI Viewer This repo contains a Webpage build with Nuxtjs and Vuetify to easily show and switch between multiple OpenAPI descriptions. The data co

null 2 Sep 1, 2022
Vue star rating application without any external libraries

Vue star rating application without any external libraries

Jebasuthan 5 Sep 5, 2022
View BeReal posts from your friends without posting yours

View BeReal posts from your friends without posting yours. Screenshot and save BeReals from your friends without them knowing :)

null 24 Dec 29, 2022
This is a lightweight plugin for TouchEvent in mobile without any dependency, which removes the 300ms delay from clicks.

This is a lightweight plugin for TouchEvent in mobile without any dependency, which removes the 300ms delay from clicks.

MaiSCRM 0 Sep 7, 2020