I managed to use vue2 components inside html files when I was using webpack with html loader. Component was simply placed into html template and everything worked out of the box.
Eg. index.html
<section class="bg-shadow">
<cover-hero-carousel
:backgrounds="{{ hero_backgrounds | json_encode }}"
:delay="2000"
:duration="3000"
>
</cover-hero-carousel>
</section>
I have tried to do the same with Vue3 with Vite, but no success. Is for Vite needed anything special or is simply not possible anymore, to place vue component anywhere into html and would work.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/vite.svg"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Title</title>
</head>
<body>
<div id="app">
<cover-hero-carousel
:backgrounds="{{ hero_backgrounds | json_encode }}"
:delay="2000"
:duration="3000"
>
</cover-hero-carousel>
</div>
<script type="module" src="src/assets/js/main.js"></script>
</body>
</html>
Placing Vue components "anywhere into html" and them magically working has never been possible.
What gives you this impression is a combination of two factors:
Vue templates look very similar to HTML
when a Vue app is mounted into an existing HTML element, its contents are used as template for that app.
Technically, there's an alternative to the above: it's also possible to register Vue components as Custom Elements. That use-case might also give you the false impression that Vue components work anywhere. But you'd still need to load Vue upfront, load and declare the web components before any browser could make sense of them.
Overall, using vue components as web components is more technically challenging than using them in a Vue app's template.
Getting back to your example, for it to work, src/assets/js/main.js would need to load Vue and contain code to mount a Vue app into #app. Also, that Vue app would need to have a <cover-hero-carousel /> registered component.
All of the above is still possible in Vue 3, just like in Vue 2. It's the code in main.js that needs some minor tweaking.
Related
So I created a web app using visual studio .net core 3.1. I see that boostrap came with it by default. So what I did was copy and paste the accordion example from bootstrap and was expecting it to work by default but it is not rendering. I double checked and see that jquery is referenced before boost strap. I checked the css and JS file and it is loaded, and there is no error in the console. Is there something else I need to do?
Update:
This is where I got the sample code, it is the very first example: Bootsrap example
You can open bootstrap.js in your project,you will find the version of bootstrap is v4.3.1,and you are referencing the official document of bootstrap v5.0,so you need to add the css and js of v5.0.
You can try to add the css and js of v5.0 to your _layout.cshtml.
<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>
I've created a new application with Vue CLI and I'm using the following code in my index.html to embed an SVG icon.
<link rel="icon" type="image/svg+xml" sizes="any" href="/img/icons/icon.svg">
This on it's own should work without any issues.
However, when Vue builds the application, I can see this line gets commented out in the source code.
Regular (png) icons work just fine without being wrapped in the [if IE] tag.
<!--[if IE]><link rel="icon" type="image/svg+xml" sizes="any" href="/img/icons/icon.svg"><![endif]-->
I would like my original code to be used instead of it being wrapped in the [if IE] tag, is there any way to tell Vue not to edit it?
EDIT: Here's the code to reproduce the issue: https://github.com/CerxMe/vue-icon-bug
I want to customize the input field textbox height more minimal and its font style. I used matblazor component to my project. Can someone know how I can solve this problem from root CSS or something like that?
Just include an additional CSS file in the _Host.cshtml like
...
<head>
...
<link rel="stylesheet" href="my-custom-matblazor-styles.css" />
</head>
or in your .razor file like this
<link rel="stylesheet" href="my-custom-matblazor-styles.css" />
to override the CSS rules of MatBlazor.
I would favor the latter as you need the CSS file only when you are actually using a MatBlazor component on a page.
Do not mangle with the original CSS files as it will result in a complete chaos when a new version of MatBlazor is released.
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.
I am building a site based off of Bootstrap Carousel theme... unfortunately nothing is working when I copy the index and css file into my directory. Are there other files aside from the CSS that need to be in the same directory? like the glyphicons and all the buttons. It's literally just displaying the html... no carousel or anything.
nothing needs to be in same directory! just check you have the right path to the files! and all are loaded. As well as include the bootstrap links
Something like this :
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>