i try this solution to use external js but did't work
<template>
<div>
<script
type="application/javascript"
defer
src="/assets/javascript/jquery.flexslider-min.js"
></script>
</div>
</template>
the error shown
GET http://localhost:3000/assets/javascript/jquery.flexslider-min.js net::ERR_ABORTED 404 (Not Found)
If you're planning to use some NPM packages, the way to go is Nuxt plugins.
If you're more into loading 3rd party scripts, the approach explained here is the way to go: https://stackoverflow.com/a/67535277/8816585
By the look of your jQuery file, you will probably be interesting by this article: https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/
But if you can, try to either use NPM packages or look for packages in the Vue ecosystem rather than using jQuery.
When you use vue or nuxt, the proper way to use external packages is by installing them on your projects using npm or yarn or another package manager.
I am pretty new to Symfony and NPM, Composer etc. I set up my symfony project and installed Bootstrap 4 via NPM
npm install bootstrap
Now the bootstrap files are located in the "node_modules/bootstrap" folder.
How can I include this sources correctly in my base.html.twig?
<link href="{{ asset('node_modules/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet">
I don't know if that is the correct way. As I said, I am new to this.
You can use "import" in your js file to import css.
import 'bootstrap/dist/css/bootstrap.min.css';
https://reactstrap.github.io/
I have pulled in bulma in my project through :
$ npm install bulma
After that, how can I refer to it in my pages. I really don't know how to work with npm, so please can you guide me. Do I have to refer to it in my js by saying:
import bulma from 'bulma' or require it, I don't know where my files are. That means I don't know where are they located.
You can find the final css build at projectName/node_modules/bulma/css/bulma.css.
Chances are you're using a file loader with webpack and similar. If, for example in a Vue project, you have that, then you can use import syntax:
import 'bulma/css/bulma.css'
within your js. This works because having import [xyz from] 'xyz' will look at projectName/node_modules/xyz, and in the case of a css file, it's as simple as that!
If you do not have that installed, you need to find a way to send it over to the client. Just copy projectName/node_modules/bulma/css/bulma.css into a file, maybe bulma.css, in either an assets or public or whatever you use, then fetch it like you'd fetch any css file within the html: <link rel="stylesheet" href="/bulma.css">
#import "../node_modules/bulma/css/bulma.css";
If you have a main.css file for your project or something similar to that, you can add the above line inside your main.css file. This will import the default bulma.css file located inside your project's path node_modules/bulma/css/ after you have installed bulma via npm.
NOTE: you must include your main.css file( or something similar) inside your index.html as a static import if you chose to go this way.
For that you need to have something like:
<link rel="stylesheet" href="/css/main.css">
I prefer this since bulma is a CSS framework, I think it's best to keep the stylesheets linked with each other.
It's CSS only.
Bulma is a CSS framework.
So you can add it just in your index.html like a normal css link:
<link rel="stylesheet" type="text/css" href="your/bulma/path/bulma.css />
Edit: You have installed bulma through the nodejs environment with the package manager npm so you must have a directory called node_modules and inside the bulma directory.
That is really unevident. If you want to get bulma work with fontawesome5 via npm, minimum working deps (for now) are:
npm i -S bulma #fortawesome/fontawesome #fortawesome/fontawesome-free-solid
then needed to be initialized like this:
import fontawesome from '#fortawesome/fontawesome'
import solid from '#fortawesome/fontawesome-free-solid'
import 'bulma/css/bulma.css'
fontawesome.library.add(solid)
More details can be found here: https://fontawesome.com/how-to-use/use-with-node-js
I had the same issue in Vue and in the end I solved it thanks to this link. For Bulma you just need to run:
$ npm install bulma
After npm install, your files should be located under node_modules folder.
For Bulma, check that you have a folder bulma under node_modules, then you can import bulma css framework in your main.js file as follows: import "./../node_modules/bulma/css/bulma.css";
Note: even if on the link I provided they suggest the full path to bulma this is not a good practice as #Omkar pointed out, so I ended up importing bulma as follows: import "bulma/css/bulma.css";
Alternative Answer: CSS Preprocessing
I'm posting a somewhat indirect way to answer the question. I came here looking to see how I could use rendered SASS in my main app.js (in my case, for use in a pug.js template).
The answer is: use a CSS pre-processor. In this minimal example, I'll use node-sass.
0. Install:
npm install node-sass
npm install bulma
1. Create an inherited style
mystyles.scss:
#charset "utf-8";
#import "node_modules/bulma/bulma.sass"; // <--- Check and make sure this file is here after installing Bulma
This will inherit styles from the Bulma installation, but override those styles with what you place here.
2. Build the CSS
app.js:
const nsass = require("node-sass");
const rendered_style = nsass.renderSync({ // <---- This call is synchronous!
file: "./mystyles.scss",
});
Here, node-sass is processing the .scss file into a Result object that has CSS buffer. Note that node-sass has an asynchronous call (sass.render()) as well, if needed.
3. Use the CSS
The buffer containing the CSS is now available at rendered_style.css
console.write(rendered_style.css)
--Notes--
The benefit of the SASS approach is that it unlocks Customization, which is what makes Bulma powerful!
Keep in mind that if app.js is your entry point, the CSS will be rendered every time you run the server. If your styles aren't changing frequently, it may be best to write it out to a file. You can see more on this approach in the Bulma Documenation I adapted this from.
declaring this in the index.html file worked for me.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
In React, we have to declare this in the same html file where the root of the app is present.
I currently have mapbox.js#3.0.1 installed, which depends on leaflet#1.0.2. I want to npm install a leaflet plugin leaflet.markercluster#1.0.2, which requires leaflet 1.0.x (which I have through mapbox.js). How can I install leaflet.marketcluster and tell it to find leaflet using mapbox's dependency?
Leaflet is indeed already included within Mapbox.
So you should not have anything to do in particular to have Leaflet.markercluster plugin work with it.
Should you load those 2 libraries the "standard" way (i.e. through <script> tags in your HTML page), everything should work without issue:
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<script src='https://unpkg.com/leaflet.markercluster#1.0.3/dist/leaflet.markercluster.js'></script>
<link href='https://unpkg.com/leaflet.markercluster#1.0.3/dist/MarkerCluster.css' rel='stylesheet' />
<link href='https://unpkg.com/leaflet.markercluster#1.0.3/dist/MarkerCluster.Default.css' rel='stylesheet' />
Demo: http://plnkr.co/edit/HX6yYCvNEvv8rD0khIjG?p=preview
Now since you want to include Leaflet.markercluster through npm, I think you can simply have the lib code included in your bundle (e.g. through import "leaflet.markercluster", or whatever is required by your build engine), and the L.markerClusterGroup factory should be added without issue.
There is no CDN for React-art library. So, I installed it via npm install react-art in the local asp.net project.
In the cshtml file where I use the ReactART object, I used the following script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></Script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.20/require.js"></script>
<script src="..\..\node_modules\react-art\lib\reactart.js"></script>
But I can't get the reference to the ReactART object.
How can I consume react-art and it's dependencies?
You will need Browserify or Webpack to create js bundle with react-art. They both understand common.js require directive. Check out official example for more info.