Giter VIP home page Giter VIP logo

vue-script-component's Introduction

Vue Script Component

A component to enable scripts to be loaded within the template tags of a .vue file.

Since I couldn't find a generic VueJS component to load ads, I made my own. While this component was initially built to load third-party ads, it should be able to load any javascript your pretty little hearts desire.

Table of Contents

Installation

npm install vue-script-component

Usage

Find a *.vue file that you want to load a script in, and...

<template>
    <div>
        <VueScriptComponent script='<script type="text/javascript"> alert("Peekaboo!"); </script>'/>
    <div>
</template>

<script>
import VueScriptComponent from 'vue-script-component'

export default {
  ...
  components: {
    ...
    VueScriptComponent
  }
  ...
}
</script>

Demo

You can find this approach being used in one of my websites https://imgsurv.com . It's a temporary image hosting site to help share images between people no matter the platform. The ads shown on the site are from Propeller at the time of writing.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

vue-script-component's People

Contributors

blimmer avatar dependabot[bot] avatar thedynomike avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-script-component's Issues

npm package does not reflect changes in master branch

I installed this component with the command "npm install vue-script-component" and followed the rest of the instructions for usage. During compilation of my Vue project, I get an error about missing dependencies for document-ready and postscribe.

It appears this issue was already fixed with PR #8 - see related discussion #7 . However, the fix does not yet seem to have made its way into the main npm package. I'm not super familiar with the process for updating npm packages so I don't know what to suggest as a solution, but I wanted to at least let you know about it.

In the meantime, for the sake of other people who run into this, I was able to fix it simply by installing the peer dependencies like this:

npm install document-ready@^2.0.1
npm install postscribe@^2.0.8

runtime dependencies are not included

Currently, there are no runtime dependencies declared for this module:

"dependencies": {},

However, document-ready and postscribe are used at runtime:

import postscribe from "postscribe";
var ready = require("document-ready");

These either need to be:
a) included in the dependencies block
b) listed as peerDependencies (which would require the user to install them into their project).

I'd recommend option A unless you feel strongly that people should be managing the dependency on their own.

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.