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.
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
I am new to Nuxt.
I have a page
pages/page1.vue
<template>
<h1 class="title">Page</h1>
</template>
<style>
.title {
font-size: 16px;
}
</style>
Then, under layouts I have an error.vue
layouts/error.vue
<template>
<h1 class="title">Error Page</h1>
</template>
<style>
.title {
color: red;
font-size: 18px;
}
</style>
What I found is that when page1 is rendered, the title appears in Red. I checked the inspect elements and found that the CSS of error as well as of page 1 is applied.
I do not have a default.vue in the layouts directory.
As mentioned this is my first project in Nuxt (or vue) and want to understand how to ensure that CSS of a page are applied on that page only. This is in development mode (npm run dev). Thanks
The issue is CSS without scoped attribute renders at application level. You should use scoped attribute in styles tag as
layouts/error.vue
<template>
<h1 class="title">Error Page</h1>
</template>
<style scoped>
.title {
color: red;
font-size: 18px;
}
</style>
**When a <style> tag has the scoped attribute, its CSS will apply to elements of the current component only otherwise consider global style.
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>
So I have this Component code
<template>
<div class="example-class">
<p>Test</p>
</div>
</template>
<style>
.example-class {
background-image: url("HOW to include the image here?");
}
</style>
How can I include the image in that style section code?
My component is in a directory
src/component/sample-comp/MyComponent.vue
My images are in a directory
assets/images
I already tried using #/assets/images/sample-image.png It wont include the image. It is giving an error below
ERROR Failed to compile with 1 errors 08:53:42
This relative module was not found:
* ./#/assets/images/cta-bg.png in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-18a303e8","scoped":false,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/frontend/landing-layouts/CallToAction.vue
You cannot use the # alias as Webpack cannot understand this alias inside the <style></style> tags.
There are two options to do this.
First option:
Since # is mapped as src/ in Webpack, using your component, your path should be background-image: url('../../assets/images/cta-bg.png') in the <style></style> tags.
Second option:
You can use the style binding directly in the <div> tag.
<div :style="backgroundImage: `url(${require(`#/assets/images/cta-bg.png`)})`">
<p>Test</p>
</div>
just update the background URL form
<template>
<div class="example-class">
<p>Test</p>
</div>
</template>
<style>
.example-class {
background-image: url("HOW to include the image here?");
}
</style>
To
<template>
<div class="example-class">
<p>Test</p>
</div>
</template>
<style>
.example-class {
background-image: url("~#/assets/images/sidebar.svg");
}
</style>
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.