how to create html otomatic in template vue file - javascript

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

Related

How to import ACE code editor into vue without using its vue component?

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.

Importing external JavaScript file in VueJS

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

Multiple Vue instances bind to parent & child elements

I would like to ask for best setup of Vue instances (components), when I do not want use SPA.
My HTML looks like:
<html>
<div id="layout">
<div>Some Layout based content...</div>
<div id="homepage">
<simple-form-component></simple-form-component>
</div>
</div>
<script type=text/javascript src="homepage.js"></script>
<script type=text/javascript src="layout.js"></script>
</html>
Currently I have simple example ot two .js files:
layout.js
homepage.js
// layout.js
import Vue from 'vue/dist/vue.js'
new Vue({
el: '#layout',
});
// homepage.js
import Vue from 'vue/dist/vue.js';
import SimpleForm from '../../../../components/SimpleForm.vue';
new Vue({
el: '#homepage',
components: {
SimpleForm,
},
});
It seems to work fine, but I am suspicious that this is not 100% correct, due to console error:
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
(found in )
Do you have any ideas/experience how to setup my scenario correctly?
PS: I would like to have my JS split into different files, managed by webpack and distributed by backend.
Thank you,
Mario
I've found workaround v-pre, my HTML will change the line: <div id="homepage" v-pre>. One small issue is, that I will not see my components in Vue Devtools.

Load multiple components to js file but use only the required one(s)

I'm learning to use the svelte framework to make components. But I haven't been able to make an instance of only one component from those I have loaded into the js file.
So, this is my html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="./build/ReviewPanelComponent.js"></script>
</body>
</html>
My js input file (where I import the components):
import ReviewPanel from './ReviewPanel.html';
const reviewPanel = new ReviewPanel({
target: document.querySelector( 'body' ),
data:
JSON.parse(localStorage.getItem('rooms'))
});
export default {
components: {
reviewPanel,
}
}
And the html for the component:
<style>
#main{
background-color:white;
}
h3,
h4,
h5{
font-weight: bold;
}
</style>
<div class="container">
<div class="row">
<div id="main" class="col-xs-12">
<div id="title">
{{#if BookedRooms.length > 0}}
{{#each BookedRooms as br}}
<h3>{{br.Title}}</h3>
{{#each br.PossibleRateTypes as prt}}
<h4>{{prt.UUID}}</h4>
{{/each}}
{{/each}}
{{/if}}
</div>
</div>
</div>
</div>
So, at this moment, it loads the component, because it has an instance on the js input file. The thing is, at this moment, if I want a second instance I have to create one of the js file itself. I was thinking more like just importing all the components I want in the js file and in the html file where I want to use them I would just call them.
Is this possible. I've been reading the docs but I haven't found what I want.
EDIT: I forgot to say that I'm using webpack, also. Hence the input and output files. I managed to use multiple components. The solution I've found was to just do this on my js input file:
import ReviewPanel from './ReviewPanel.html';
window.ReviewPanel=ReviewPanel;
window.ReviewPanel2=ReviewPanel;
I put the imported object in a global variable so I can call it where I want it, like so:
<div id="reviewPanel"></div>
<script type="text/javascript">
// Creates the review panel component
window.ReviewPanel = new ReviewPanel({
target: document.querySelector('#reviewPanel'),
data:
JSON.parse(localStorage.getItem('rooms'))
});
</script>
Yet, although I have this solution, my expectation would be import it only once in the js input file, without having to rely on global objects, and then just call it where I need it like so:
// And passing the parameters
<ReviewPanel />
Although I haven't seen much on React.js that's how I generally see programmers doing this. I was expecting the same. Still, as I have other things that need to be done, I'll leave it like this for now, to be optimized later.
Still, if anyone knows how to do this I'm all ears, as I'm new to Svelte and there's not much info on it, apart from the docs, which I consider a bit confusing on same parts.
If I understood correctly, to achieve your goal you could use a module bundler such as Rollup or webpack with their respective Svelte plugin and loader. In this perspective, the easiest way to start is to use a template based on one or the other.

Using stylus #import in vue js components

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 ;-)

Categories

Resources