Vue-frame

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:

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