GithubHelp home page GithubHelp logo

Comments (2)

FranckFreiburger avatar FranckFreiburger commented on May 21, 2024

here is a full but minimalist example:

my-component.vue

<template>
  <div class="hello">Hello {{who}}</div>
</template>

<script>
module.exports = {
  data: function() {
    return {
      who: 'world'
    }
  }
}
</script>

<style>
.hello {
  background-color: #ffe;
}
</style>

index.html

<!doctype html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
  </head>

  <body>
    <div id="my-app">
      <my-component></my-component>
    </div>

    <script type="text/javascript">
      new Vue({
        el: '#my-app',
        components: {
          'my-component': httpVueLoader('my-component.vue')
        }
      });
    </script>
  </body>
</html>

since some browsers do not allow XMLHttpRequest to access local files (Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https),
you can start a small express server to run this example.

npm install express
npm install serve-static

server.js

var path = require('path');
var express = require('express');
var serveStatic = require('serve-static');

var app = express();
app.use(serveStatic(__dirname, {'index': 'index.html'}));
app.listen(8181);

node server

from http-vue-loader.

acklenx avatar acklenx commented on May 21, 2024

Brilliant! That works. I was running a server, but that is very nice to call out the CORS restriction, that easily could have tripped me up. Being new I just wasn't sure what was required/missing, and going from example to example it's easy to miss a detail. I did try converting a more complete vue component that I wrote, but in the rewrite I missed the pound (#) in the el identifier. Thank you very much for the example.

Might I suggest (via pull request if you prefer) to include your full example for us noobs in your readme? You could then keep the deltas you already have for each of the different ways to use your loader. I think it would be helpful. Not a big deal, people can now find the example in the issues section. Just a thought.

I really like this loader. If fills a huge gap for small to medium sized projects/prototypes . I want my components in separate files, but I don't want to build (or download an extra 39MB! of cli just to see my changes). For a less opinionated framework, Alex chose and odd place to be very opinionated.

Thanks again

Quincy

from http-vue-loader.

Related Issues (20)

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.