I'm trying to use VKThread in React. However it doesn't appear
to be available as an npm package. according to the instructions, they say to add <script src="../vkthread/vkthread.min.js" type="text/javascript"></script> to your project. However I don't know how I can do this in a react app.
Any help is appreciated, thanks very much!
You have a "traditional" index.html located in /public. You can add any script such as your <script src="../vkthread/vkthread.min.js" type="text/javascript"></script> in the body there.
Related
I'd like to use three.js library that's located online, and I've included a path to three.js file into my <script> tag inside index.html. But my script doesn't work because there's no access to three.js library.
<script src="https://threejs.org/build/three.js"></script>
Is it possible to use three.js library remotely?
Try this way:
<script src="https://threejs.org/build/three.js" crossorigin="anonymous"></script>
It is working in my project.
If it still wont working, try to find here, how to install this: Instalation Three.js
I want to use one component of my Vue website on another website by embedding it in HTML.
I decided to use https://github.com/karol-f/vue-custom-element and reference to this guide.
I tried the following in my main.js file after installing vue-custom-element and document-register-element npm packages.
import Vue from 'vue';
import vueCustomElement from 'vue-custom-element';
import 'document-register-element/build/document-register-element';
import reusableComponent from './components/reusableComponent.vue';
Vue.use(vueCustomElement);
Vue.customElement('reusable-component', reusableComponent);
And then I was trying to use on another website like that.
<reusable-component><reusable-component />
<link href="/dist/static/css/app.36dd3e0b96e06ae6f3130a58cf185192.css" rel="stylesheet">
<script type="text/javascript" src="/dist/static/js/manifest.2ae2e69a05c33dfc65f8.js">.
</script>
<script type="text/javascript" src="/dist/static/js/vendor.614f0593bd5c53cf6320.js">.
</script>
<script type="text/javascript" src="/dist/static/js/app.1c44a427c10b2e559de0.js"></script>
But before I tried to use the reusable component in another website, my main website was crashed by this error.
Has anyone faced this issue before?
Thank you in advance!
I think it's not correct use of vue-custom-element.
If you are going to use the whole project as a widget for the different project, it would be possible.
Vue.customElement('reusable-component', reusableComponent);
So, this library is to import the App.vue, not only specific component of the project.
Vue.customElement('reusable-component', App);
Say I only import this file in a script tag.
What does Vue.js has to offer as a technology that I cannot access by referring only to:
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
After some more research, I've found Vue.js has a CDN for vue-router.
<!-- vue-router -->
<script src="https://unpkg.com/vue-router#2.0.0/dist/vue-router.js"></script>
I wanna be able to use the pattern
<template>
<script>
<style>
..but I don't want to import or installl anything else.
You want to use single file component.
But it's only possible in a .vue file which is compiled by webpack, browserify or rollup. It's not possible to do that by just import vue.js in a html file.
I am fairly new to Laravel but I'm getting to grips with it.
At the moment there a partial blade that just includes scripts from the public assets folder, like below.
<script src="{{asset('js/jquery-3.2.1.min.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('assets/library/slick/slick.js')}}"></script>
<script src="{{asset('assets/library/slick/slick-init.js')}}"></script>
<script src="{{asset('assets/library/tinymce/jquery.tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce-settings.js')}}"></script>
<script src="{{asset('js/isotope-docs.min.js')}}"></script> <!-- JQuery and Bootstrap JS -->
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('js/grid.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
I feel like this is a bit messy and far from optimal.
I did some poking around in resources/assets/js and saw that by default Laravel uses bootstrap.js and then grabs this in app.js. Also the items in bootstrap.js seem to be grabbed directly from the node_modules folder.
Is it better practice to instead include all the JavaScript libraries in bootstrap.js?
If so, could I install all these libraries via NPM and somehow include them in the bootstrap.js file? At least the ones that are available via npm.
Then in my footer I could just include app.js instead of my individual scripts.
You can use Laravel mix to concatenate, minify/uglify your JS, style assets.
Laravel mix documentation
I created new project and selected "Angular JS" as project type in webstorm.
Now webstorm has created a project for me like this:
I have added angular.js as a dependent javascript library.
When I open the index.html file, it has below code:
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
The code is referring to angular js files which are present in folder called as bower_components, but the webstorm has not created any such folder automatically. Due to this when I created a file called app1.js and trying to write some angular js code the auto-completion is not working at all.
What is the correct way of creating the projects in webstorm for Angular JS?
Earlier I tried with creating a simple project rather than Angular Js project but still had issue with auto-completion. The details are given in this post : How to create a simple angular js project in webstorm
Update:
Thanks to Daniel, now the issue of bower components is solved. But still the auto-completion is not working when I try to do for code webstorm.controller, please see below screenshot, how can I fix this issue?
Standard Angular methods completion doesn't currently work, please follow WEB-14134 for updates