franckfreiburger / http-vue-loader Goto Github PK

View Code? Open in Web Editor NEW

1.5K 1.5K 274.0 94 KB

load .vue files from your html/js

License: MIT License

JavaScript 100.00%

http http-vue-loader loader promise vue vue-files vue-loader vuejs2

http-vue-loader's People

Contributors

Stargazers

Watchers

Forkers

cuulee chatfeed sjbat peccu okusnadi kingstar272 juneman xatgithub w3cj acklenx michaelramos ap51 amaranthlis mkgaru gilhyun congzw gitzhang audersch dcmsstudio rodrigojusto feusebio maple3142 ethanliew naeluh alfredocodekit macartur tomasruizr wkeyikai idushii plugn klarkc devjoo rekby-archive lavas-ui burningtyger tianyili nathcodestoo jchristov keleli fanpeiyao purplesyringa dracula45678 liyunxu362802482 ilovedesert001 jimshell workmae artyprog hanshou101 opensourcedemocracy devgurusio marianoremedi cyearsley carlosvarela to-know mydaoyuan watermelon8157 wingmeng swoony anhoev benjak135765 redcholove garryguzy youxiaotian sunwanxin213 wkke jiangtao diexue coderofsalvation hhy5277 lixiang1142340210 samccp rje4242 tice9982 nejik twick00 rocnightmare 2394484383lukang xueleilei gq-jesse boyzzy1995 qq403925754 hellomotoi cnyezi wisdomjpdev caojikeai tooto1985 dannypei thejaredwilcurt lovely-kids-garden linusok wjkbl753 ok266 viperby pulipulichen alecor-sudo 364427800 wuzhifeibuhuifei telramund andervilo yijian3014

http-vue-loader's Issues

If working in Visual Studio 2017

Just to mention, that will need to set mimeType for ".vue" extension file to use httpvueloader

May need to do it in Project "ApplicationHost" config file or in IIS Express "ApplicationHost" config file.

Project:
C:\Users<your name>\Documents\Visual Studio 2017\Projects<project name>.vs\config

IIS Express:
C:\Users<your name>\Documents\IISExpress\config

<mimeMap fileExtension=".vue" mimeType="application/javascript" />

Otherwise, keeps throwing file not found when referencing url file .vue.

Failed to Resolve Async Component

Sorry if this is a dumb question, but I kept getting error saying "[Vue warn]: Failed to resolve async component:"

I'm trying to build a simple file reader, here is my code:

// scr/main.js
new Vue({
el: '#app',
components: {
'App': httpVueLoader('scr/App.vue')
},
template: ''
});

// scr/App.vue

Thank you very much for helping!

Microsoft Edge CSS Scoping error

Edit - better title for issue, as it's only an Microsoft Edge -issue and not Internet Explorer 10/11 (sorry for the confusing title "Internet Explorer Edge", as such thing doesn't exist and leads to confusion).

When using Internet Explorer Edge, I'm getting following error when using "scoped" attribute for style. Apparently no error on IE11, Chrome or Firefox:

Vue warn]: Failed to resolve async component: function () {
			return new Component(name).load(url)
			.then(function(component) {
				
				return component.normalize();
			})
			.then(function(component) {
				
				return component.compile();
			})
			.then(function(component) {
				
				var exports = component.script !== null ? component.script.module.exports : {};
				
				if ( component.template !== null )
					exports.template = component.template.getContent();

				if ( exports.name === undefined )
					if ( component.name !== undefined )
						exports.name = component.name;

				return exports;
			})
		}
Reason: TypeError: Unable to get property 'setAttribute' of undefined or null reference
vue.js (440,7)

Index.html

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
	<meta charset="UTF-8">
</head>
	<body>
		<div id="app">
			<board></board>
		</div>

		<script src="js/es6-promise.auto.min.js"></script>
		<script src="js/http-vue-loader.js"></script>
		
		<script>
			new Vue({
				el: '#app',
				components: { 
					'board': httpVueLoader('js/main-component.vue'),
				},
			});
		</script>
	</body>
</html>

main-component.vue

<template>
	<div class="board">
		test
	</div>
</template>

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

<style scoped>
.board {
	background: grey;
}
</style>

I traced error back to this line:
this.template.getRootElt().setAttribute(this._scopeId, '');

Apparently getRootElt return undefined on IE Edge ?

Global registration

There some way to register these components globally?

Something like:

Vue.component('my-component-name', httpVueLoader('./path/file.vue'))

It would be very useful for components that are used in all views.

Possible issue with template parsing and self-closed HTML elements

I suspect there is something odd in the way this module handles the templates as I had used a <div .. /> instead of <div></div> in my <template> block, and that broke various things in the template.

Worked just fine on codesandbox.io where I fiddled around and tested first..

Might be worth looking into, I don't have any repro sample handy at the moment - just filing this so I don't forget..

Suport other extension ".html" for allowing syntaxhiglight in Plunker

Hello Franck,
First thanks for your loader. Works wonderfull. :-)
I have one simple request that I think can make sense. Allow the extension ".html" in vue files.
I use this loader in Plunker. I use to create the Vue files with ".html" extension so that I can fully use the syntax highlight of plunker (.vue extensión files are not yet highlighted), but now http-vue-loader only supports ".vue" extensions.

thanks again.

[feature request] relative url in nested components

Awesome plugin. Exactly what I was looking for.

The tool automatically adds index.vue to an URL without .vue. This is great.

let mainComponent = httpVueLoader('/views/main-component');
// URL resolved to '/views/main-component/index.vue'

It would be nice, if the tool would also support nested components with relative URLs.

I could also try to implement it myself and make a pull request.

This is an example how it would look like.

<!-- /views/main-component/index.vue -->
<template><div></div></template>
<script>
    module.exports = {
        /*...*/
        components: {
            'nested-component': httpVueLoader('./nested-component'),
            // URL resolved to '/views/main-component/nested-component/index.vue'
        }
    };
</script>

Not able to load .vue file from folder above

It's not possible to include an .vue file if the folder is not in the same direction!

Would it be possible to support something like this?

  new Vue({
    el: '#my-app',
    components: {
      'my-component': httpVueLoader('../test/my-component.vue')
    }
  });

httpVueLoaderRegister is not defined

I get this error:

Uncaught ReferenceError: httpVueLoaderRegister is not defined

Should it be httpVueLoader.register in README?

URL have to be ends with "filename.vue"

Hi,

We needs to use your plugin to load vue components per http / ajax request.
In our usecases the URL to the external- or remote component looks like this:

http://service/path/to/my/component
or
http://service/path/to/my/component/
Currently this URL delivers the content of the related component as text/plain.
Is this a problem?

It looks as that your plugin changed our URL to this:

http://service/path/to/my/component/index.vue

Is there a option or whatever to configure the behavior for the url?

Greetings Mario

quickfix: add support to vue.html

Hi!

I was modified the url regex to use a static HTML file for vue (as some HTTP Server configurations has a restrictive list of extensions working)

 var comp = url.match(/(.*?)([^/]+?)\/?(\.vue)?(\?.*|#.*|$|.html$)/);

for example:

new Vue({
		el: '#my-app',
		components: {
			'my-component': httpVueLoader('App.vue.html')
		}
	});

This also useful for code coloring in vue-less IDE's.

Clarification: httpVueLoader(...)() kinda works most of the time.

Mostly a clarification/question:

I had an issue here where suddenly in my project I was not able to use custom components registered in the "outer" Vue environment any more, and the same with $plugins: they were not available (undefined) on this.$* but was available through this.$root.$* (in the http-vue-loader components' contexts).

I eventually tracked it down to having used httpVueLoader(url)() instead of just httpVueLoader(url) when loading the components. I'm not sure why the first variant event works, but apparently it did.

The first variant DOES seems to work a random'th portion of the time, but then just suddenly starts misbehaving again, then works again, then stops working. Is there any logic behind this? :) A promise / caching / load time race condition combo of sorts?

<style lang="sass"> / httpVueLoader.langProcessor.scss error

I'm getting an error while trying to use httpVueLoader.langProcessor.scss
I used the README.md example

Can .vue refer to external js/css files placed on CDN?

Do this work if .vue refer to external js/css files placed on CDN?

在script标签里写es6

在script标签里写es6有些浏览器报错，有什么方法能在script里写es6被浏览器识别

Add custom script langage support (<script lang="...">)

... as suggested by @wenbob and @fanfan2000, see PR #3

General overview question on plugin stability & lifespan

I really love what you have come up with in here! I'v been looking for simple solution for loading & parsing vue-files directrly from browser with runtime-compilation and apparently you came up with solution!

1)I'm only wondering how stable do you consider this solution to be?
2) I'v tried it with IE11, Chrome & Firefox with no problems, but do you think the core solution of library has lifespan for upcoming browser updates & vue-updates (== "is it generic solution")?
3) Well, not actually a question : Apparently it's not using runtime-compilation, but simply registers script-section to Vue - simple & clever!
4) ... most interesting question for myself: Do you plan to continue updating this plugin, as it seems to be one of the most interesting ones I have seen?
5) As I have problem introducing webpack-stack to rather hard-to-maintain-and-configure environment, I wonder what are the real cons on using http-vue-loader as runtime-solution? Would you strongly oppose using http-vue-loader in actual production use and why (or would you give at least "careful green" :) ?

请问 less 应该如何处理！

这个例子是 stylus 的。 Less 如何修改？另外还有如果想直接把vue后缀的单文件组件ES6 JS 转为ES5 有没有方法？非常感谢，这2个问题能解答一下？谢谢！谢谢!

Minor wish: support for url-parameters

I have an issue with web-server / framework cache not refreshing as often as I'd like to. I would be perfectly fine with having daily cache-flush, which is easy to enable by writing:

'editor': httpVueLoader(LR.contextPath + '/js/views/event/editor.vue?ts=' + moment().format('DDMMYYYY')),

Basically browser cache would be skipped when timestamp-parameter changes. For some reason these parameters are parsed away by httpVueLoader, so that it always ends fetched url to be "something/something.vue", without questionmark & parameters. What changes would be needed in order to support url-parameters, and what is the original reason for parsing 'em out?

functional component

Hi, can it support functional component ?

module.exports may be a promise.

In features list has point - module.exports may be a promise.
Sorry if I my question will be odd but what this mean and how this works.
I try

module.exports = async function () {
    const aaa = await bbb();
    return {
       data() {
            return {};
       }
    }
}

but this not works. Can you comment on how I can use this feature.

Is it possible to require/import?

I've been using httpVueLoader for a side project where I just don't need a compile step and it's been very convenient!

As the app has been getting more complex, I've been wanting to modularize some parts, but require doesn't seem to work inside of a .Vue file's script block. I'm assuming it's not supported, but sort of hoping I'm just doing it wrong...

<script>
var mixins = require('./test.js');

module.exports = {
    mixins,
});
</script>

Nothing actually breaks, but ./test.js doesn't get loaded and my mixins don't get executed.

Nested Component not working

Hello, first of all, great project!
While trying to use a component inside another component, I am running into the error below

vue.js:616 [Vue warn]: Unknown custom element: <pixel-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <CanvasComponent>
       <Root>.

Please see sample vue files here https://github.com/leyuz/learn_httpvueloader
(both the vue files are in the same folder called component, i.e.

--components
+--- canvas-component.vue
+--- pixel-component.vue

If I comment out the <pixel-component/> in cavans-component.vue, then I can see <h1>Canvas</h1> rendered properly.
But if I uncomment it, it will show the Vue warn above.

I also tried changing the path of the httpVueLoader, i.e.

"pixel-component": httpVueLoader("./pixel-component.vue")
"pixel-component": httpVueLoader("component/pixel-component.vue")
"pixel-component": httpVueLoader("pixel-component.vue")

None worked. Please help!
Thanks.

style scoped and @media queries issue

It seems that component is ignoring css @media queries when <style scoped> is specified.
Background does not turn red on small screen in the example below, but it does when "scoped" is removed.

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

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

<style scoped>
    .hello {
        background-color: green;
    }

    @media screen and (max-width: 650px) {
        .hello {
            background-color: red;
        }
    }
</style>

Error and warning handling in SFCs

Is there any way of handling errors or warnings in the SFCs, or at least detect if an error has occurred at run-time?

If a do a major no-no like {{null.null}} it will raise a high-level Error that bubbles up to the $root .errorHandler event, and is also captured by any errorCaptured handlers, so that can sort of be dealt with.

However if I pass in a template that has something like {{ "".toUpperCase] }} the javascript console (in development mode only!) will print: a [Vue warn]: Error compiling template: and invalid expression: missing ) after argument list in, and the entire template fails to render anything at all.

It does return a VueComponent object, but I'm not sure if there's anything in it I can check for if things went sour or not..

ref:

https://vuejs.org/v2/api/#errorHandler
https://vuejs.org/v2/api/#warnHandler (not available in production mode)
https://vuejs.org/v2/api/#errorCaptured

Either source string as input or at least work with data-URIs

Would it be possible to get the constructor to take a inline sourced string as input, instead of requiring a URL? (maybe with a base path for any images or whatever the template might refer to)

Alternatively I tried passing the source as a data-uri string, but then I get an error: httpVueLoader.js:453 GET data:text/plain;base64,xxxxxxxxx/index.vue net::ERR_INVALID_URL (apparently it tries to append /index.vue)

Blank nested router view when refreshed

Hi,

I managed to create a nested router view using httpvueloader, and its working great.
But when I tried to refresh it or open the link in a new tab, its just blank. (params)

On console it says:
Failed to mount component: template or render function not defined.

This was not the case when I created a nested router view using pure JS files. Am I missing something here?

On firefox console:
`XML Parsing Error: prefix not bound to a namespace
Location: http://localhost:8080/app-vue/dashboard/src/components/routes/projects.vue
Line Number 9, Column 25:

[Vue warn]: Failed to mount component: template or render function not defined.`

Add an async way to use httpVueLoader

Add an async way to use httpVueLoader like this

httpVueLoader('component.vue').then(component => {
    Vue.component('component', component)
})

Load .vue component file from within other .vue component at runtime

Hello,

In the examples I see how I can load and register .vue component files in my index.html file.

I am wondering if i can use this functionality from within an existing .vue file.

example :

<template>
    <dynamicComponent/>
</template>

<script>
    export default {
        name: "example-lazy-load",
      components: {
          'dynamicComponent' : httpVueLoader('https://url/component.vue')
      }
    }
</script>

<style scoped>

</style>

Is this possible?

If I try this I get :

  vue.esm.js?65d7:591 [Vue warn]: Failed to resolve async component: function () {

			return new Component(name).load(url)
			.then(function(component) {

				return component.normalize();
			})
			.then(function(component) {

				return component.compile();
			})
			.then(function(component) {

				var exports = component.script !== null ? component.script.module.exports : {};

				if ( component.template !== null )
					exports.template = component.template.getContent();

				if ( exports.name === undefined )
					if ( component.name !== undefined )
						exports.name = component.name;

				exports._baseURI = component.baseURI;

				return exports;
			});
		}
Reason: SyntaxError: Unexpected token export

The component.vue file is accessible and I can see the contents if I visit http://url/component.vue with my browser.

I do include <script src="https://unpkg.com/http-vue-loader"></script> in my index.html file.

Thanks,

George.

SFC template content is ignored when module.exports is a promise

First of all, thanks for creating http-vue-loader. It has been a lifesaver in a demo situation.

README.md states that module.exports may be a promise. But when I do that, it looks like the template element in the SFC is ingnored.

Although my use case is more involved, the simplest complete example that replicates this is:

index.html

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    new Vue({
      template: '<my-greeting></my-greeting>',
      components: {
        'my-greeting': httpVueLoader('my-greeting.vue')
      },
      mounted: function() {
        console.log('Mounted from root')
      }
    }).$mount('#app')
  </script>
</body>
</html>

my-greeting.vue

<template>
  <div>Hello</div>
</template>

<script>
  module.exports = Promise.resolve({
    mounted: function() {
      console.log('Mounted from my-greeting')
    }
  })
</script>

<style>
</style>

If index.html is viewed in a browser, the following vue warning is displayed in the developer tools console:
Failed to mount component: template or render function not defined. found in ---> <MyGreeting>.

And when I examine the returned component via httpVueLoader('my-greeting)().then(c => {console.log(c)...}) then indeed it contains no template property.

But if module.exports is a regular object, the example runs without problems and the component passed to the 'then' callback function contains a template property with the content of the template element.

Also when the object, resolved in the promise assigned to module.exports, contains a template property itself, there are no problems (although the value of the template property is used, and not the content of the template elelement).

httpVueLoader is not defined Using httpVueLoader from vue + Webpack

This is more a question than a bug.

I'm trying to use httpVueLoader from a component in vue, But for some reason httpVueLoader is not defined.

`import Vue from 'vue';
import httpVueLoader from 'http-vue-loader';

Vue.use(httpVueLoader);

export default {
data() {
},
components: {
Modal,
},
mounted() {
console.log(JSON.stringify(httpVueLoader('myurl'))); //httpVueLoader is not defined
this.loadInfo();
},`

ReferenceError: httpVueLoader is not defined at eval (eval at mounted (webpack-internal:///518), :1:1) at VueComponent.mounted (webpack-internal:///518:52:5) at callHook (webpack-internal:///4:2825:21) at Object.insert (webpack-internal:///4:4029:7) at invokeInsertHook (webpack-internal:///4:5777:28) at Vue$3.patch [as patch] (webpack-internal:///4:5985:5) at Vue$3.Vue._update (webpack-internal:///4:2570:19) at Vue$3.updateComponent (webpack-internal:///4:2698:10) at Watcher.get (webpack-internal:///4:3041:25) at new Watcher (webpack-internal:///4:3030:12)

Do you know what could be wrong?

<style scoped>

Hi,

Can style in .vue file be scoped?
I tried adding scoped to your example, but .hello class was working even outside the component.
Am I missing something?

Mirko

SCSS not working

I have added the scss loader:

    httpVueLoader.langProcessor.scss = function (scssText) {
        let css = ''
        sass.compile(scssText, function (result) {
            css = result.text
        })
        return css
    }

and in my template I have:

<style scoped lang='scss' src='page.scss'></style>

I know that the langProcessor works because if I add a console.log(css) I get valid css.
Since I have working processors for pug and es6 via babel I don't think my setup is broken.

If I just use plain css as in:

<style scoped>
  .main { color: red}
</style>

it also works.

I couldn't import via @import inside my style tags because then the page.scss file was never found so I gave up on that. Still, I can't see why this is not working.

XML Parsing Error

Hi,

I got XML Parsing Error: not well formed or XML Parsing Error: prefix not bound to a namespace in Firefox console whenever I used v-bind or v-on. How to resolve this? Thanks in advance.

can i use this to compile vue file to js file?

can i use this to compile vue file to js file?
It means convert vue file to es5 render function.
i think this will be faster in production.

problems with css

Hi there,

I found two bugs, or kind of:

<style lang="css"> throws the error

Failed to resolve async component: function () {

			return new Component(name).load(url)
			.then(function(component) {
				
				return component.normalize();
			})
			.then(function(component) {
				
				return component.compile();
			})
			.then(function(component) {
				
				var exports = component.script !== null ? component.script.module.exports : {};
				
				if ( component.template !== null )
					exports.template = component.template.getContent();

				if ( exports.name === undefined )
					if ( component.name !== undefined )
						exports.name = component.name;

				return exports;
			})
		}
Reason: TypeError: httpVueLoader.langProcessor[lang.toLowerCase(...)] is not a function

scoped style add [data-s-0] css prefix so I can't override rules via media queries without !important flag or by adding the prefix too. But if it's a dynamic prefix it couldn't work.

Failed to resolve async component when using newest http-vue-loader version

Hi I'm new to vue.js.
I got error & I don't know how to resolve
this is how I use http-vue-loader, and I put my components in

public/components/test/a.vue
public/components/test/b.vue

Vue.use(httpVueLoader);

new Vue({
components: {
'a': httpVueLoader('/components/test/a.vue'),
'b': httpVueLoader('/components/test/b.vue'),
}, ...

with

vue.js:485 [Vue warn]: Failed to resolve async component: function () {

		return new Component(name).load(url)
		.then(function(component) {
			
			return component.normalize();
		})
		.then(function(component) {
			
			return component.compile();
		})
		.then(function(component) {
			
			var exports = component.script !== null ? component.script.module.exports : {};
			
			if ( component.template !== null )
				exports.template = component.template.getContent();

			if ( exports.name === undefined )
				if ( component.name !== undefined )
					exports.name = component.name;

			return exports;
		})
	}

Reason: TypeError: url.substr is not a function

WHY IT TELL ME I GOT A TYPE ERROR ?

vue-cli 3 -> vue.config.js option to include compiler

I guess it might be worth mentioning somewhere (eg requirements) that for vue-cli 3 this requires

{ compiler: true; }

in vue.config.js - see https://github.com/vuejs/vue-cli/blob/dev/docs/config.md

...to save other people the same head-scratching and frustration that I had.

Otherwise you'll get "You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build."

Ability to specify base path (e.g. for template image assets etc) ?

If there is a reference to an image asset within the template it seems the path is resolved relative to the initial Vue app, e.g. if the app is at localhost:8080/ and the .vue file is loaded from somewhere else but has e.g. <img src="assets/foo.png">, then that is resolved as localhost:8080/assets/foo.png

Is there any way of setting an additional "base path" per template loaded via http-vue-loader ?

Next Tick fails

module.exports = {
mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}
}

[Vue warn]: Failed to resolve async component: function() {

Unfortunately this is causing this error for me. Any idea how to get $nextTick working?

Clarification needed

Hi, great project! I'm curious why you not recommend it for production?

How to user with vue-router

Hello,

How to user with vue-router?

Thank you.

Why run the example code has the unexpected error ?

Vue version: v2.4.1
http-vue-loader: v1.3.1

Why run the example code has the unexpected error ?
But the view is current result.

How to use httpRequest

I am running following in http-server

However the following is working, but not the when i replace

 'my-component': httpVueLoader('my-component.vue')

 'my-component': httpVueLoader.httpRequest('my-component.vue')

I received following error:

[email protected]:440 [Vue warn]: Failed to mount component: template or render function not defined.

found in
--->

`<!doctype html>

<title>Vue App</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">
  httpVueLoader.httpRequest = function(url) {
      
      return axios.get(url)
      .then(function(res) {
          console.log(res.data)
          return res.data;
      })
      .catch(function(err) {
          
          return Promise.reject(err.status);
      });
  }


  new Vue({
    el: '#my-app',
    components: {
      'my-component': httpVueLoader('my-component.vue')
    }
  });
</script>

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

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

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

Docs Request: add documentation for loading .vue file via CDN

Hello and thank you for this loader. I have a use case where I need to load .vue file at runtime because my application have requirement for plugin feature. I'm thinking of using this loader for that. Can this loader do that via CDN and/or local files? Also can this loader load minifed vue component (outputted as .js) at runtime?

Transition fade out-in doesn't work as expected on first load

HTML Markup
<transition name="fade" mode="out-in"> <component :is="selectedModule"></component> </transition>

Components Load
Vue.component('component-a', httpVueLoader.load('app/components/component-a.vue', 'component-a')); Vue.component('component-b', httpVueLoader.load('app/components/component-b.vue', 'component-b')); Vue.component('component-c', httpVueLoader.load('app/components/component-c.vue', 'component-c'));

It appears the out-in transition behaves the same as the in-out transition (Component B fades in before/during Component A fade out), but only on the first load of the component. If switching between previously loaded (cached?) components, transitions behave as expected. Please see the attached GIF demonstrating the behavior.

I've been digging into the source in hopes to address this myself through a pull request, but unfortunately I'm very new to Vue and some of this is still a mystery to me. If there's anything else I can provide, I'm happy to do so. Thanks!

Demo GIF

support for nested components ?

I'm just starting to learn vuejs and I've just come across your httpVueLoader. A great tool since it may solve a problem I have, because I can't use a build environment in production for some reasons. Does it support nested components within the component imported via httpVueLoader ?

Is it possibile the call recursive?

Hi,
i write the example:
index.html

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

my-component.vue

Ciao {{who}}!

my-component-2.vue

Ciao 2 {{who}}!

[ERROR]
Error compiling template:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

Why?

Thanks

Not Working in Phonegap

Hi. Good evening. Sorry if this is a bit of a novice question but I am a bit lost and would like some expert to advise.

I have a working vue app with this library to load asynch components. However when I experimented on it on phonegap, the components with httpVueLoader("vue/components/mainApp.vue") is not working and not showing in the phonegap mobile preview. However, when I tested it on the browser, its working perfectly...

Here is an example of what I experiemnted...

var vueApp = new Vue({
	el: "#asugfr-app",
	data: {
		txt: "hello world!",
	},
	components: {
	     "myComponent": { template: "<div>A custom component!</div>" },
	     "mainApp": httpVueLoader("vue/components/mainApp.vue")
        },
	methods: {},
	mounted: function(){ 
		console.log("App is running!");
	},
	watch: {}
});

the component loads perfectly in both phonegap preview and browser, however, only works in browser.

Any suggestions or ideas of I am doing wrong?

Example Incomplete

None of the examples appear complete. It doesn't seem as though that much is missing from the snippets... except that I can't get it to work. I tried it my code first (foolishly). I have a "full" example of the html that I am using. I'm using your my-component.vue example unmodified - since it seemed complete. Is there an error in the sample code, or is it something I messed up when filling in blanks?

<!doctype html>
<html lang="en">
	< head>
		<script src="https://unpkg.com/[email protected]"></script>
		<script src="https://unpkg.com/[email protected]"></script>
		<script src="https://unpkg.com/[email protected]"></script>
		<script src="https://unpkg.com/[email protected]"></script>
	</head>

	<body>
		<my-component></my-component>
		<!-- More Javascript -->
		<script type="text/javascript">

			new Vue( {
				components: {
					'my-component': httpVueLoader( 'my-component.vue' )
				}
			} );

		</script>
	</body>
</html>

franckfreiburger / http-vue-loader Goto Github PK

http-vue-loader's People

Contributors

Stargazers

Watchers

Forkers

http-vue-loader's Issues

public/components/test/a.vue public/components/test/b.vue

Recommend Projects

Recommend Topics

Recommend Org

Jobs

public/components/test/a.vue
public/components/test/b.vue