i'm integrating Vue into a website, however when I use a component it's styles are added just before the closing </body> tag, which is not ideal, as I need to add styles below these to over-ride colors etc, this is per client of course.
Is there a way I can add an id to my client styles, and have my component styles appended above here?
So at my document needs to look like so:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Vue Styles -->
<style type="text/css">
</style>
<!-- END Vue Styles -->
<!-- Client Styles -->
<style type="text/css">
</style>
<!-- END Client Styles -->
</head>
<body>
</body>
</html>
I don't think you can order the way styles are included. But there are a couple of things you can do.
If you add styles via import in App.js they will be added first.
You can use !important to your css definitions. Ofc this will only work if the initial definitions don't already have !important set.
I have yet to try it out, but it seems that CSS Extraction provided by the vue-loader Webpack loader allows extracting the css to an external bundle. Once you have that, you can include it wherever you want on your webpage.
I don't know your application structure but in Vue you can add style for each component in that corresponding component.
TestComponent.vue
<template src='./Test.html'>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
Related
In my nuxt project in assets folder i have a file with global styles default select for example. When i have some styles in my component or just some comment in tag - everything works well. But when tag is empty - styles are not applied, but bootstrap styles still working. I'm using nuxt 2.15.3
Element
<b-form-group label="some label">
<b-form-select class="default-select"></b-form-select>
</b-form-group>
Style tag
<style scoped lang="sass">
//*If you will delete this comment - nuxt will not download global styles here. Magic
</style>
Maybe there some webpack error
forgive my ignorance here, I am super new to Vue. I am looking for a way to utilize bootstrap-Vue from CDN (https://bootstrap-vue.js.org/docs/ click browser on right nav). I am not seeing how to call the components. Using the webpack / CLI version, no problems, but CDN, I am lost at how to use this.
I put up a simple codepen.io to test this. I've added the CSS and js files per the docs.
https://codepen.io/jasonflaherty/pen/rrzbxj
//do I need this?
Vue.use(BootstrapVue);
//try individual components.
import { Card } from 'bootstrap-vue/es/components';
Vue.use(Card);
What am I missing to utilize bootstrap-vue.js CDN? Do I need to import differently?
Just include the required CDN below and without invoking Vue.use(XXX)
(There is a Basic example from the official website.)
<!-- Required Stylesheets -->
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
/>
<link
type="text/css"
rel="stylesheet"
href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"
/>
<!-- Required scripts -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
When you run the Basic example, you will get the bootstrap decoration.
If you use the CDN, you do not need to use the BootstrapVue plugin; it will do that for you. Just including the script adds all the BootstrapVue components globally.
You cannot use ES6 import statements in the browser.
You do need to create a Vue.
Here is your pen updated.
You should to use a basic structure of Vue. So, your JS should be:
const vue = new Vue({
el: "#app"
})
And is necessary that your HTML code stay into a:
<div id="app">
<!-- ...your code -->
</div>
How do I add or import CSS to instant prototyping with Vue CLI3?
I serve my prototype via vue serve MyComponent.vue but if I add <style> tags into the template it is ignored...
I would like to import Tailwind CSS.
<template>
<div id="ds-configurator" class="test">
Test
dva
</div>
</template>
<!-- this is ignored when served -->
<style>
html, body {
height:100%;
min-height:100%;
}
#ds-configurator, .test {
background: #eee;
}
<style>
I have figured out I can provide my own index.html where I can import Tailwind CSS or anything else.
I have been playing around with Vue Js a bit and want to create a dummy Java EE Web application using it on the front end inside of Eclipse. From what I can discern, Vue single file components are compiled into a single JavaScript file using some build engine like Webpack et alia. I don't want to do that right now. So I've tried to create JavaScript files that emulate .vue files. But for some reason, Vue directives are being stripped out of the generated HTML. Here's illustrative code:
/** vuetest.js
* Javascript file that emulates a .vue file, to facilitate easy prototyping within an
* Eclipse Dynamic Web Application without having to compile single file Vue components
* outside of the IDE.
*/
var appTemplate = `
<div style="width:100%">
<div class="div-style"><a v-on:click ="alert('Working...');">Test</a></div>
<div class="div-style-two"><a onclick ="alert('Working...');">Test 2</a></div>
</div>
`;
var style = `<style type='text/css'>
.div-style {
float:left;
width: 50%;
background-color: orange;
}
.div-style-two {
float:right;
width: 50%;
background-color: blue;
}
</style>`;
$(style).appendTo("head");
Vue.component('app-content', {
template: appTemplate
});
var app = new Vue({
el: '#app'
});
And:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Vue Directives Test</title>
<script src="lib/vue.js"></script>
<script src="lib/jquery-3.3.1.js"></script>
</head>
<body>
<div id="app">
<app-content></app-content>
</div>
<script src="js/vuetest.js"></script>
</body>
</html>
All works fine except the v-on directive; it is stripped out of the compiled template. What am I missing?
Thanks in advance for the help!
Why the v-on is not there
The v-on directive; it is stripped out of the compiled template. What am I missing?
Vue.js removes all directive attributes after compiling them, so you rendered markup is clean and tidy. (source)
So, the v-on is just not in the HTML, but it was taken into account.
Making it work
In your case, you will also get an error like:
VM5894 vue.js:584 [Vue warn]: Property or method "alert" is not
defined on the instance but referenced during render. Make sure that
this property is reactive, either in the data option, or for
class-based components, by initializing the property. See:
https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <AppContent>
<Root>
VM5906:2 Uncaught TypeError: alert is not a function
This happens because Vue will expect the alert to be a method on the component. Try adding methods: { alert: alert.bind(window) } to your component declaration:
Vue.component('app-content', {
template: appTemplate,
methods: { alert: alert.bind(window) }
});
The code above will make the component's alert() method be the window.alert() method.
Check here a plunker demo of this code.
So I'm trying out Elm and WebRTC together. However for WebRTC I need some interop to javascript. So I created an index.html with the needed script includes, for both WebRTC and main.js.
However, I am using elm-reactor. Which is super nice. But there is no main.js. I can create it with elm-make, but then I would have to manually update it.
So, is there a way to have elm-reactor work together with embedded elm?
Note: I'm using Elm 0.18, latest as of writing.
You might want to look at elm-live.
It has the same options that elm-reactor has, but you can use your own index.html.
As of today(0.18.0), officially you can not use elm-reactor for embedding your application into custom HTML. It is also impossible to have port subscriptions with elm-reactor without additional setup.
Consider using something like Create Elm App or alternatives.
If you're willing to hack a bit, it's perfectly possible to use your own index.html with elm reactor. Just put the following in an index.html file and open it in reactor (e.g. http://localhost:8000/src/index.html):
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="styles.css"><!-- Put your styles in folder with index.html -->
</head>
<body>
<div style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #9A9A9A; font-family: 'Source Sans Pro';">
<div style="font-size: 3em;">Building your project!</div>
<img src="/_reactor/waiting.gif">
<div style="font-size: 1em">With new projects, I need a bunch of extra time to download packages.</div>
</div>
</body>
<!-- Fonts and external JS and styles are available, I've put Ace for example -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/ace.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/theme-chrome.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.4/worker-lua.js"></script>
<!-- Put the name of your app here (my sources place in `src` forder) -->
<script type="text/javascript" src="/_compile/src/YourApp.elm"></script>
<!-- Removes splash and starts elm app. -->
<script type="text/javascript">
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
runElmProgram();
</script>
</html>
If you want to use ports or flags, use the following example (you need Elm.App.fullscreen(flags) etc to use ports, but runElmProgram() to show errors):
<!doctype html>
<meta charset=utf-8>
<title>a title</title>
<link href=/bundle.css rel=stylesheet>
<body></body>
<script src="/_compile/Main.elm"></script> <!-- this will fail in production -->
<script src="/elm-bundle.js"></script> <!-- this will fail in development -->
<script>
var app
var flags = {}
try {
app = Elm.App.fullscreen(flags)
/* app.ports is now available */
} catch (e) {
// this will run in case there are compile errors:
var stylesheets = document.querySelectorAll('link')
for (var i = 0; i < stylesheets.length; i++) {
stylesheets[i].parentNode.removeChild(stylesheets[i])
}
runElmProgram()
}
</script>