I have a page design (HTML template, CSS, and some jquery on ti) which is pretty legacy and the current task is to make it work with Vue as a first step (we have a plan to override it fully later). Also, it uses Jquery MDB (I know there is a VUE MDB but we plan the move from MDB and it makes no sense to buy the license), so what I want to achieve is to include jquery and MDB to index.html (not like npm dependencies as I just have a local MDB file) and also to have a access to jquery from inside the VUE.
So currently in index.html, I'm including dependencies like this:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="stylesheet" href="<%= BASE_URL %>vendors/bootstrap.min.css">
<link rel="stylesheet" href="<%= BASE_URL %>vendors/mdb/mdb.min.css">
<script src="/vendors/jquery-3.4.1.min.js"> </script>
<script src="/vendors/mdb/mdb.min.js"></script>
but when I'm trying to use jquery in VUE for example like this $('.datepicker').pickadate({... I'm getting the error ‘$’ is not defined
What should I do to make external jquery work in/with VUE?
UPDATED
What I did, now I have iin the index.html like this:
<script src="/vendors/jquery-3.4.1.min.js"> </script>
<script src="/vendors/mdb/mdb.min.js"></script>
and as an addition, I also install npm jquery package and including it to the file which needs it like this: import $ from 'jquery' . Now I'm getting different error, B(...)(...).pickadate is not a function and I'm not user what is this B(...)(...) as in code I have $('.datepicker').pickadate({...
Probably it's some conflict as now I have 2 jquery in the page...
Related
I installed bootstrap using NPM
In a normal svelte project I usualy add bootstrap and other packages, which are used project wide, in the App.ts file. However, in a SvelteKit project there is no main entry point.
So what is the recommended way of adding bootstrap 5 or other packages to SvelteKit globally?
I don't want to use rollup plugins, but rather just want to import it as an module in JavaScript
As of SvelteKit 1.0, the easiest way I found to add static scripts and styles that will be available everywhere is to add them to
src/app.html
That is the file that includes everything else including the <html> tag, so you can place the styles in the <head> and the scripts in the <body>, including CDN URLs, like you have always done before.
This setup allows you to easily override Bootstrap settings, e.g. I added a style to unset the <body>'s background-color that is set by Bootstrap.
To host the scripts yourself rather than use a CDN, put them in the src/static directory and reference them using the prefix %sveltekit.assets%/. For example, I placed the files bootstrap.min.css and bootstrap.bundle.min.js in src/static/bootstrap-5.0.2/ so now my src/app.html file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
<link href="%sveltekit.assets%/res/bootstrap-5.0.2/bootstrap.min.css" rel="stylesheet">
<style>
body {
/* override Bootstrap */
background-color: unset;
}
</style>
</head>
<body>
<div style="display: contents">%sveltekit.body%</div>
<script src="%sveltekit.assets%/res/bootstrap-5.0.2/bootstrap.bundle.min.js"></script>
</body>
</html>
If you want to use a CDN instead of self hosting the files then for e.g. for Bootstrap 5.0.2 you can use the following:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
You can make a top level __layout and import everything there.
I add this because this seems to be a good way for adding packages to a SvelteKit app.
https://github.com/svelte-add/svelte-add
If you want to add Bootstrap for example use
npx svelte-add#latest bootstrap
As of date of writing this, there are not alot of packages yet, hopefully that changes in the future.
Firstly run npm install bootstrap inside your sveltekit project.
Then
In your root +layout.svelte put
<script>
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
</script>
References
https://vitejs.dev/guide/features.html#css
https://vitejs.dev/guide/assets.html#explicit-url-imports
My problem is what i don't know how to connect js library leaflet.js( it downloaded and located in node_modules) on page with map in my laravel project. leaflet's site says that i should add
<link rel="stylesheet" href="/path/to/leaflet.css" />
<script src="/path/to/leaflet.js"></script>
and write path to library in these src's, but i don't know how to get it, i've tryed to do some operations with laravel mix but it didn't helped me(or i did something wrong, idk)
There are many ways to add the CSS and js file. In you downloaded a full zipped folder then out it to public folder with the name leaflet.Then Add the following code :
<link rel="stylesheet" href="{{ asset('leaflet/to/leaflet.css')}} " />
<script src="{{ asset('leaflet/to/leaflet.js') }} "></script>
Next, if you can be downloading through the following command:
npm install leaflet
Then add required within your resources/js/bootstrap.js file.
require("leaflet");
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'm working on an admin panel built on top of AdminLTE template. The template depends on jquery, bootstrap and some other custom plugins that must be previously included using script tags in document head.
I'm using Jspm to manage libraries, some libraries like Toastr will require jQuery as a dependency, and will install and load another copy of jQuery.
I'm trying to figure out how to configure SystemJS in order to:
a) Tell SystemJS that I don't need install another copy of jQuery and
b) avoid duplicate loading of jQuery, since it's a global dependency that was previously loaded. How to achieve this?
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
...
<script src="system.js"></script>
<script>
System.config({
"map": {
"jquery": window.jQuery //???
}
});
</script>
<script>
System.import('main').
</script>
Looks like you want to use System.set
System.set( 'jQuery', System.newModule({'default': window.jQuery }) );
This assumes the global is expected to be the 'default'. You can also specify other exports as well by passing in more key / values to System.newModule.
If you can, it would be better to import your globals like other scripts because globals can have dependencies and systemjs can manage the load order for you through meta config setup
I have set up a page and have implemented bootstrap using the CDN code that is recommended to access the online bootstrap server:
for the CSS:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
Javascript:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
However eventually my site will have to go live and I'm not certain that this code will suffice when that happens and I feel I should download the actual bootstrap code.
Furthermore if I download the bootstrap code properly and put it in a hypothetical media folder called "css2" such that it won't interfere with my own custom css files, where do I then put crispy_forms.
As of now I am holding them in the downloaded crispy forms files within "media"- on the same level as "myproject" but the "{ load crispy_forms}" tag doesn't look in the media folder because the "CRISPY_TEMPLATE_PACK = 'bootstrap3'" does not specify a path to look for the crispy forms content... the crispy forms website tells to look up the django documentation for how to organise my media folder but searching the website under "cripy forms" returns nothing.....
Finally, I have added crispy forms to my installed apps:
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myproject.myapp'
'crispy_forms', ###Registered
)
However when i migrate and run the server I get an error:
ImportError: No module named myappcrispy_forms
so I rearranged the order of the modules and then got this error:
ImportError: No module named crispy_forms
Should i download bootstrap properly or do the CDNs suffice?
Where do I store the bootstrap code and how will it affect my own CSS code?
How do register the module crispy_forms? and where do I store the crispy forms folder there is little documentation on this?
Thanks
Using CDN has it's pros and cons: it allows you to cache bootstrap files, so that your site pages should be downloaded faster from the second time. On the other hand, you do not usually need to use all the bootstrap css functionality, but only a tiny bit of it. In that case local and "self-cleaned" bootstrap files are prefered. Project collectors like Gulp can really help you with the "cleaning" of bootstrap css.
I usually store bootstrap files in /static/css/bootstrap.min.css
and /static/js/bootstrap.js - in the same folder with other css and js files. In order to give your own css more priority just link it in html file after bootstrap files.
Well, personally I think crispy_forms have quite clear documentation. To start using it you should only: install it, add app to Installed apps in settings.py and point to the css framework you want to use by setting a template pack variable. From docs you can see that crispy no longer upload it's own bootstrap files. It will use yours instead.