I wonder if it's possible from within the style part of a vue file to use stylus #import feature
Let's say i do have in my assets folder a funcs.stylfile containing this dummy function
add(a)
a + a
And in my App.vue i want to use that function
<template>
<div id="app">
<h1>{{ msg }}</h1>
</div
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style lang="stylus" scoped>
#import "../assets/funcs.styl"
h1
margin add(30px)
</style>
Works just fine thanks to #Potray
Seb
You should use the webpack stylus-loader.
npm i --save-dev stylus stylus-loader
Then inside your vue component use
<style lang="stylus"></style>
instead of the regular tag.
Hope this'll work for you :)
This is just an answer so the initial question can be closed.
You are (were) missing a quote mark in the #import line
Like #Potray points it out i did a simple error missing a quote in a line
It's fixed ;-)
Related
Beginner in vue here. I would want to use ace code editor (this package ) in vue.
For learning purposes, I don't want to use the vue2-component & vue3-component versions of the ace editor. How to do to it?
Why do I want to do this?
I am a programmer from pre-jquery era.Catching upto modern web development, starting with Vue. I noticed that lot of Vue component packages aren't upto date with their plain JS library conterparts. I want to learn this so that I can use any non-vue library in vue.
EDIT:
As per the first answer, The editor is working but the syntax highlighting & themes aren't working in the code editor. Probably, style sheets aren't loading or working.
I get the following errors in the console though. I have no clue about what else should be configuring.
EDIT 2:
So i tried to use the code provided by Andres Abadia but even with it i'm getting the error:
loader is not configured
(by the way if your using js remove the lang="ts" from the script tag)
But ace-code is working so where it goes wrong and why it does not load themes ?
The actual problem is you're using the ace-code package raw files like you was going to use them on an out Framework world but if you wanted to use some highlights or some other feature from it you couldn't load them because you'll have to use some scripts via CDN and import them one by one and you'll have some issues with the defined key so what i propose you to use directly use the package needed who is ace-builds with the all generated file to use (of course i will give you some snippet for Vue2 & Vue3) but there is a specification and thanks to the Ace team in this package they provide a webpack-resolver who will make your loader (Webpack in your case otherwise the error will be different with Vite if i'm not wrong) load all the files and understand them so like this you can use the snippets below and work with your pretty third part library Ace code
Don't forget to install file-loader as a devDependencie to load the generated file from the ace-builds package
You will still have an require error that comes from the library it use some require but with all the information i gaved you you can see some loader or some transpilador like Babel to make it work from your CommonJS to ES6
For Vue2:
<template>
<div class="ace-container">
<!-- ID is used in official documents, it is forbidden to use it here, it is easy to cause problems after packaging later, just use ref or DOM -->
<div class="ace-editor" ref="ace"></div>
</div>
</template>
<script>
import ace from'ace-builds'
import'ace-builds/webpack-resolver'
import'ace-builds/src-noconflict/theme-monokai'
import'ace-builds/src-noconflict/mode-javascript'
export default {
mounted () {
this.aceEditor = ace.edit(this.$refs.ace, {
maxLines: 20,
minLines: 10,
fontSize: 14,
theme: this.themePath,
mode: this.modePath,
tabSize: 4
})
},
data () {
return {
aceEditor: null,
themePath:'ace/theme/monokai',//If webpack-resolver is not imported, the module path will report an error
modePath:'ace/mode/javascript'//Same as above
}
}
}
</script>
<style scoped>
.ace-editor {
width: 100%;
height: 400px;
}
</style>
Vue3:
<template>
<div class="ace-container">
<!-- ID is used in official documents, it is forbidden to use it here, it is easy to cause problems after packaging later, just use ref or DOM -->
<div id="editor"></div>
</div>
</template>
<script setup>
import {onMounted} from "vue";
import ace from "ace-builds";
import 'ace-builds/webpack-resolver'
import 'ace-builds/src-noconflict/theme-clouds';
import 'ace-builds/src-noconflict/mode-latex';
onMounted(() => {
ace.edit('editor', {
maxLines: 20,
minLines: 10,
fontSize: 14,
theme: 'ace/theme/monokai',
mode: 'ace/mode/javascript',
tabSize: 4
})
});
</script>
<style scoped>
#editor {
width: 100%;
height: 400px;
}
</style>
Using third party libraries is super easy with vue. I'm guessing your using some kind of package manager like npm to install ace-code. Just install the library and import it in the component you want to use it. I replicate the first example of the ace docs.
Ace code component:
AceCode.vue
<script setup lang="ts">
import { onMounted } from "vue";
import ace from "ace-code";
onMounted(() => {
ace.edit("editor");
});
</script>
<template>
<div id="editor"></div>
</template>
<style scoped>
#editor {
position: absolute;
width: 500px;
height: 400px;
}
</style>
As you see the css and html is the same just the logic has to change a bit. Wait for vue to render the html and after that call the edit method. You can do this by using the onMounted method from vue.
I'm using the Vue CLI and I want to import a JavaScript file that is hosted on another server. With everything I tried I get the same error as shown below.
How can I solve this problem? How can I import an external JS file?
My Vue file is shown below.
<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
<div id="app">
<p>Test</p>
<button #click="doSomething">Say hello.</button>
</div>
</template>
<script>
import TestFile from "https://.../src/TestFile.js";
export default {
data() {
return {
message: "<h1>anything</h1>"
}
},
async mounted() {
await TestFile.build();
},
methods: {
doSomething() {
alert(message);
},
},
};
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
</style>
You cannot use import to fetch the modules from the URL, but there is a trick that you can do to use the scripts from the URL.
It's similar to attaching CDNJS's script. The solution is that you need to create the element and then append that element in the document's script.
The best solution would be, use a mounted lifecycle and then create and append it.
Example Importing FontAwesome CDN Script:
mounted() {
let fontAwesome = document.createElement('script')
fontAwesome.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js')
document.head.appendChild(fontAwesome)
},
In this way registering script will give you your functions access in global object window.
For example, now I can access some of the cool properties of FontAwesome like this:
window.FontAwesome.config
We are running Nuxt in a monorepo and things are working well. We are utilizing a /base directory containing our reusable components and stylesheets, and each project has its own subdirectory within a /projects directory.
Our global variables/mixins are being added to the base nuxt.config.js via the #nuxtjs/style-resources module which we then extend and import into the project's own nuxt.config.js.
In our components, we are hoping to dynamically import a project-specific stylesheet using an environment variable. We currently have something like:
//component-name.vue
<template>
//Template things
</template>
<script>
export default {
data() {
return {
projectPrefix: process.env.PROJECT_PREFIX
}
}
}
}
</script>
<style lang="scss">
#import 'base/assets/styles/scss/_component-name.scss';
//We would like to import the JUST ONE of the following stylesheets based on projectPrefix
#import './projects/project-foo/assets/styles/scss/_component-name.scss';
#import './projects/project-bar/assets/styles/scss/_component-name.scss';
#import './projects/project-baz/assets/styles/scss/_component-name.scss';
...
</style>
At the moment, everything works fine in terms of the styles being displayed correctly per project. The problem is that we also include a bunch of unused styles in this way.
Does anyone know of a good solution for how we might be able to dynamically import a stylesheet based on an environment variable?
You could create a component for env variable. Something like:
<template>
<component-with-style-a v-if="projectPrefix === 'A'" />
<component-with-style-b v-else />
</template>
<script>
export default {
data() {
return {
projectPrefix: process.env.PROJECT_PREFIX
}
}
}
}
</script>
i want to create html inside template in vue, but i have to create manual,i using vscode editor
<template>
<div class="hello">
<h1>hellow word</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
in code above , even only create h1 i have to make open tag html dan create close, than take time
any body have solution
i have install many snippet but all is not working
Install plugin Vetur for Visual studio code and make sure your file extension is .vue
In Vue I have a component something to below:
<template>
<div></div>
</template>
<style lang="scss">
.custom {
#import "http://example.com/assets/css/style.css";
}
</style>
I have an options.json file that can be used to set a custom CSS URL. So I can set the CSS URL to anything. How do I implement that?
Dreamcode
<style lang="scss">
.custom {
#import this.options.css;
}
</style>
I know my way around variables in Vue. The tricky part for me is that the are used inside <template> or <script>, not inside <style>.
<script>
import var1 + var2 + var3 + "style.css";
</script>
As far as I know, you can't use cross variables (script > style) in Vue.
If you need to have a style sheet from URL, I suggest using environment variables which might work.