I am trying to use feather icons in laravel enviroment, I thought i would do it through npm. Can someone help me understand how this work as I couldnt get it working. I am very new to working with packages.
I installed
npm install feather-icons --save
then I added const feather = require('feather-icons') to my resource/app.js,
then I run "npm run dev"
How would i display the icons listed at this website (say cirlce) on my pages?
Is what I did above correct?
Thanks
Yes what you did is correct. Follow the steps for adding icon to your project.
Add feather.replace() method in same app.js file.
Link generated file to your layout or page it should be stored in public/js by default so the script tag is looks like (assuming you using it in Laravel Blade)
<script src="{{ asset('js/app.js') }}"></script>
Or if you are using Laravel Mix
<script src="{{ mix('js/app.js') }}"></script>
Add desired icon to your markup
<h1><i data-feather="circle"></i>Hello World</h1>
it should work fine. alternatively you can use directly by linking to CDN.
<!DOCTYPE html>
<html lang="en">
<title></title>
<script src="https://unpkg.com/feather-icons"></script>
<body>
<!-- example icon -->
<i data-feather="circle"></i>
<script>
feather.replace()
</script>
</body>
</html>
1.resource/assets/js/app.js
=================================
2.paste this code
=================================
require('./bootstrap');
//integrate
const feather = require('feather-icons')
//call
feather.replace();
============================================
3.write on terminal
============================================
npm install feather-icons
npm run dev
=======================================
4.in blade file
=======================================
<!DOCTYPE html>
<html lang="en">
<title></title>
<body>
<!-- example icon -->
<i data-feather="circle"></i>
</body>
</html>
Related
Just starting with vue.js. I am using Visual Studio Code, and have followed all the instructions for using VS Code with the Volar extension. I can see from the source files that the sample project includes a 'hello world' page (HelloWorld.vue). But when I run index.html I just get a blank screen , because of a CORS error (see below).
I haven't changed any code from the installed sample, so it appears that the vuejs.org instructions are not complete.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app">
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
and main.js:
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
createApp(App).mount('#app')
So what do I need to do to make use of the example .vue components?
The Chrome console shows a CORS problem:
Access to script at 'file:///C:/Users/quilk/Documents/testvue/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
To have an easy and simple time working with Vue, I recommend following the official steps:
npm init vue#latest
cd <your-project-name>
npm install
npm run dev
For CORS, you need to fix it on your backend/service dashboard. More details are available here.
I have done the installation steps. I tried every way but I can't run it in HTML file. Even if I throw the "gsap" file in the "node_modules" section and call it with the <script> tag, it doesn't work.
This is how I call "all.js" in HTML file. Tried all other ways too.
<script src="src/all.js"></script>
<script src="app.js"></script>
I want to use all plugins locally in my project.
<html>
<body>
<h1>Some content</h1>
<script src="path-to-my-scripts/gsap.min.js"></script>
<script src="path-to-my-scripts/ScrollTrigger.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Okay, I solved it. It is necessary to write the "min.js" files, not the "all.js" file directly.
I'm trying to deploy a Vue app in production. After executing the command "npm run build" I copied "index.html" and "dist" into my apache root directory. When I access to my website, the next mistake appears:
external "vue-axios":1 Uncaught ReferenceError: vue is not defined
Do you know if I have to do an additional step before deploying my app?
PX: This app works properly by using "npm run dev"
So it looks like the reason you are getting Uncaught ReferenceError: vue is not defined is likely due to the fact that you are requiring your source code bundle before you are requiring Vue.js. (Assuming you don't have vue bundled into your source)
So when the browser hits <script src="/dist/build.js"></script>, any code that relies on vue is going to fail.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>soporte_7x24</title> <link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/…; crossorigin="anonymous"> </head> <body> <div id="app"></div> <script src="/dist/build.js"></script> <script src="cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/…;"/> </body> </html>
Change the order of <script src="/dist/build.js"></script> so that it is after <script src="cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/…;"/>
I'm trying to understand the "elm-make" command. I built 2 .elm files call Foo.elm and Bar.elm. I'd like to display them in a HTML file of this format :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="elm.js"></script>
</head>
<body>
<h2>Foo</h2>
<div id="foo-app"></div>
<h2>Bar</h2>
<div id="bar-app"></div>
</body>
<script type="text/javascript">
Elm.embed(Elm.Foo, document.getElementById("foo-app"));
Elm.embed(Elm.Bar, document.getElementById("bar-app"));
</script>
</html>
But Elm.Foo and Elm.Bar do not exist. Only Elm.Main.
Tried to compile with this command: elm make Foo.elm Bar.elm --output elm.js. What am I doing wrong ?
It's because I did not have the module declared at the top of my files, so it implied Main :
module Foo where
I am trying to workout a HelloWorld example of Bootstrap3 and X-editable. I am attaching my page source code in this post. I am facing two issues.
I am getting the following error when i use mode as 'popup' as soon as i click on the editable link.
TypeError: this.getCalculatedOffset is not a function
If i switch from popup to inline at-least the page appears however, the buttons dont appear correctly.
Any feedback would be appreciated. Page Source is below:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>X-Editable Bootstrap Hello World!</title>
<link rel="stylesheet" href="twitter-bootstrap/css/bootstrap.css" type="text/css"/>
<link href="bootstrap-editable/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Hello World Bootstrap</h1>
<div class="hero-unit">
<p>Hey.. this is my very first XEdit-able Bootstrap site.</p>
<!-- superuser -->
superuser
</div>
</div>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="twitter-bootstrap/js/bootstrap.js"></script>
<script src="bootstrap-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script type="text/javascript">
$.fn.editable.defaults.mode = 'inline';
$(document).ready( function(){
//$('#username').editable();
$('#username').editable( {
type: 'text',
pk: 1,
url: '/post',
title: 'Enter username'
});
} );
</script>
</body>
</html>
Your bootstrap css and js files must be from 2.xx version of bootstrap, that's a problem.
Use x-editable for bootstrap 2 or update your bootstrap to version 3+.
I had the same issue after upgrading from Bootstrap 2 to Bootstrap 3.
I had upgraded Bootstrap's CSS, X-Editable's CSS and JS, but had forgotten to upgrade Bootstrap's JS which was still for v2.
Don't forget to update all files:
Bootstrap 3 .css and .js
X-Editable for Bootstrap 3 .css and .js
Probably a bit late, but hopefully that can still help someone.