Skip to content

juliandavidmr/vue-frame

Repository files navigation

Vue-frame

Build Status npm version npm GitHub stars

A simple component Vue 2.x for prototyping interfaces with iframes.

Install

Using npm:

npm install --save vue-frame

Using yarn:

yarn add vue-frame

Import

import VueFrame from 'vue-frame'
export default {
  components: { VueFrame },
  data () {
    return { /*...*/ }
  },
  methods: { /*...*/ }
}

Usage

This is a project for vue.

<div id="vue-frame">
   <vue-frame text="VueJS" url="https://vuejs.org" frame="myframe" type="button" class="form-control"></vue-frame>
   <vue-frame text="Api Vue" url="https://vuejs.org/v2/api" frame="myframe" type="a"></vue-frame>
   <br />

   <iframe id="myframe" width="800"></iframe>
</div>

<script src="/dist/vue-frame.js"></script>

The rendered elements look like this:

CURRENTLY RECORDING

PropTypes

Prop Desc Type Default Is Required
class Custom class to add to the component string
url Custom url that the component will load string
text Custom text string
frame Iframe element ID string
type Name of the HTML tag to render string a
default load site instantly mount the element boolean false

Example

<vue-frame text="VueJS" url="https://juliandavidmr.github.io" frame="idframe" type="div" class="form-control"></vue-frame>

Use CDN

<script src="https://unpkg.com/[email protected]/dist/vue-frame.js"></script>

See example with cdn index.html

Development

Command Description
npm run build Build
npm run dev Open browser dev

Contributing

License

MIT @juliandavidmr