I want to add videoJS player to polymer app ? How to Adding External JS libraries to Polymer ?
Thanks
You need to wrap your JS dependencies in an import file.
Create a new html file call it myVerySpecialLib-import.html.
Add a script tag to that file which points to your library
In the Component in which you want to use your lib import that myVerySpecialLib-import.html file
That's it! Now, you can use your library in your component.
Related
I am trying to convert an HTML template into vue project. I am very much confused about where to keep my css js files. Whether it should be in the public directory or it should be in the src directory?
you can keep your CSS and Js file inside the src directory rather than public.
public is used for keeping your static file such as static JSON, image, etc. which will not go through webpack.
Inside src/assests paste your css, fonts and image folders
like here
then make sure to include them in main.js/ts
eg.
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css' //boostarp
import './assets/css/materialdesignicons.min.css'
import './assets/css/tiny-slider.css'
import './assets/css/style.css'
import './assets/css/colors/default.css'
if it uses boostrap install npm install bootstrap as you will have to inlude them as I have shown above. as per Bootstrap Doc.
NB: Vue3 does not support boostarp 4, and vue-boostrap use boostrap 5 instaed
I want to be able to use Vue components distributed over CDN without the need to npm install them - in my single-file Vue components.
I do not understand how to import them by URL to compiled component.
Example of components I want to import is
https://unpkg.com/vueperslides (from https://antoniandre.github.io/vueper-slides/#installation)
As I understand there is a way to load JS file in mounted() hook or something, but I don't understand how to import exports from it after.
Answers I tried include
https://markus.oberlehner.net/blog/distributed-vue-applications-loading-components-via-http/
How to add external JS scripts to VueJS Components
and many others.
I am building a web app using Quasar Framowrk on Vue.js v2
as you can see I tried to import the js from src/store
I tried the following path but none of them working.
./store/member.module
/#store/member.module
member.module
Previously I used /#store/member.module for my others Vue project but somehow it is not working in vue native
You forgot src
./src/store/member.module
I suggest to create a folder named member with a js file in it module.js. Better avoid these dot notation names
I am using vue js 2.3.o version.
I want to use plugin for handling modal windows e.g. vue-js-modal (https://github.com/euvl/vue-js-modal).
I add library to my page when I want to use it.
<script type="text/javascript" src="/lib/vuejs/index.js"></script>
I put in a place before I am creating vue instance itself:
import VModal from 'vue-js-modal';
Vue.use(VModal);
var myVue = new Vue({
Then I see:
SyntaxError: import declarations may only appear at top level of a module
What I don't understand what is it about. What is wrong ? How should be this plugin correctly use ?
Thank you
It seems like you're importing the library using script tags. According to vue-js-modal's instructions, you have to use npm install vue-js-modal --save to install and then use import VModal from 'vue-js-modal' to import.
If you're using script tags to import the module, you'll have to write:
<script src="vue-js-modal.js" type="module"></script>
on your HTML page. However, for now, if you want to import modules in your browser, you'll have to do some extra steps to enable this feature. (You can follow the instructions here: link).
What I suggest is check out the demos vue-js-modal made: link, which use Babel and Webpack instead of only importing script tags. Or, when you set up your Vue web app, use their cli tool (link) to set up a starter project and then install vue-js-modal instead.
I am trying to create a plugin that utilizes components from another Vuejs plugin (Vuetify). Basically, I have some common components I want to share across multiple applications with our company.
I thought it would just be a matter of:
Create a github repo for the shared components
Author the plugin
Reference the repo in consuming apps via npm install
Here is the gist of the plugin:
// src/index.js <-- package.json/main is set to "src"
import MyComponent from "./MyComponent.vue";
import * as api from "./api";
export default function install(Vue) {
Vue.component("myComponent", MyComponent );
Vue.prototype.$myApi = api;
}
At the moment, the behavior I'm seeing is:
GOOD
plugin install function is being executed
functions from api attached to Vue.prototype are available in app components
my-component is available in the app and renders markup
BAD
$myApi and Vuetify components are not available in an application instance of of my-component
If I copy the same files into the app and change my import, all works as expected. So, I now wonder if I'm missing something regarding sharing code via external modules.
I've tried these alternatives with the same issue:
use npm link to link the plugin module to the app
manually, use mklink (Windows sym link) to link plugin module to node_modules in the app folder
use a long relative path reference to the plugin module: import MyPlugin from "../../../my-plugin"
I've put this issue off for a while, but for anyone wondering, the issue is with using Single File Components and webpack not compiling those in external modules.
The 2 options I have are:
Don't use Single File Components. I.e.: Just use .js instead of .vue. I've seen some libs like Vuetify.js take this approach
Compile the .vue files in the library module and include them in the source such as ./dist folder.