vue-frame

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

Step 1: Install

Using npm:

npm install --save vue-frame

Using yarn:

yarn add vue-frame

Step 2: Import

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

Step 3: 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/vue-frame@1.0.6/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

Reference

Below are the reference links:

No. Link
1. Read more here.
2. Follow code author here.