Hearing of Materializecss Alpha release I was excited because I was a huge fan of it. But I am confused on how to import it into a typical vue.js app and initializing it plugins
for example, how we implement this in Vue:
var instance = new M.Carousel({
fullWidth: true,
indicators: true
})
Without JQuery and with webpack component
0) I tried to use 1.0.0-alpha.2 with npm (npm install materialize-css#next) but...
1) 1.0.0-alpha.2 has an error so meanwhile I cloned the last repo version directly from github and used with npm as local dependency (this will not be needed as soon as alpha.3 will be released):
2) I generated the webpack template with vue-cli
3) I substituted the HelloWorld component with the following one... where I put the carousel initialization code in the mounted method of the component
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div class="carousel">
<div v-for="elem in images">
<a class="carousel-item" :href="elem.link"><img :src="elem.img" :alt="elem.link"></a>
</div>
</div>
</div>
</template>
<script>
import M from 'materialize-css'
export default {
name: 'Carousel',
mounted () {
var elem = document.querySelector('.carousel')
// eslint-disable-next-line
var t = new M.Carousel(elem, {
indicators: true
})
},
data () {
return {
msg: 'Welcome to Your Carousel Component',
images: [
{
img: 'http://quintagroup.com/cms/technology/Images/materialize.png',
link: 'https://github.com/Dogfalo/materialize'
},
{
img: 'https://vuejs.org/images/logo.png',
link: 'https://vuejs.org/'
},
{
img: 'https://avatars1.githubusercontent.com/u/9919?s=200&v=4',
link: 'https://github.com'
}
]
}
}
}
</script>
4) I added import 'materialize-css/dist/css/materialize.min.css' to main.js
I think that it could be as simple as that:
(function($){
$(function(){
$('.carousel').carousel({
fullWidth: true,
indicators: true
});
}); // end of document ready
})(jQuery); // end of jQuery name space
new Vue({
el: '#app',
data: {
images: [{
img: "http://quintagroup.com/cms/technology/Images/materialize.png",
link: "#link1"
},
{
img: "http://quintagroup.com/cms/technology/Images/materialize.png",
link: "#link2"
},
{
img: "http://quintagroup.com/cms/technology/Images/materialize.png",
link: "#link3"
},
{
img: "http://quintagroup.com/cms/technology/Images/materialize.png",
link: "#link4"
},
{
img: "http://quintagroup.com/cms/technology/Images/materialize.png",
link: "#link5"
}
]
}
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/css/materialize.min.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.1/js/materialize.min.js"></script>
<div id=app>
<div class="carousel">
<div v-for="elem in images">
<a class="carousel-item" :href="elem.link"><img :src="elem.img" :alt="elem.link"></a>
</div>
</div>
</div>
Related
I am new to Vue and was struggling with this basic code in Vue js 2.
I want to call a function on load of the component. So i am using mounted life cycle hook. But that is not getting triggered.
<template>
<div>--- {{ res }} ---</div>
</template>
<script>
export default {
name: "OrderChargeDetailsContainer",
data() {
return {
res: "It should change",
};
},
mounted() {
alert('alert');
this.res = "Updated data";
},
};
</script>
Any help is appreciated.
It should work as mentioned in the following running code :
new Vue({
el:"#app",
name: "OrderChargeDetailsContainer",
data() {
return {
res: "It should change",
};
},
mounted() {
alert('alert');
this.res = "Updated data";
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>--- {{ res }} ---</div>
</div>
I have the following Vue component called TeamCard:
<template>
<div class="m-8 max-w-sm rounded overflow-hidden shadow-lg">
<!-- removed fro brevety -->
div class="text-gray-900 font-bold text-xl mb-2">{{ name }}</div>
<p class="text-gray-700 text-base"> {{ description }} </p>
<!-- removed fro brevety -->
</div>
</div>
</template>
<script>
export default {
name: "TeamCard",
props: {
name: {
type: String,
required: true,
},
description: {
type: String,
required: true,
},
}
};
</script>
<style scoped>
#import "https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css";
</style>
I call the component in an HTML page (Spring boot template) the following way:
<teamCard v-bind:name="'Hawks'" v-bind:description="'Best team'" ></teamCard>
<script src="https://unpkg.com/vue"></script>
<script th:src="#{/TeamCard/TeamCard.umd.min.js}"></script>
<script>
(function() {
new Vue({
components: {
teamCard: TeamCard
}
})
})();
</script>
When I go to the page in the browser that has the second snippet, nothing is shown. There are no errors in the console. What am I doing wrong? How can I make the component be shown?
I've never seen Vue used this way but it looks like there is no mounting element for the app. Try this:
<div id="app">
<team-card v-bind:name="'Hawks'" v-bind:description="'Best team'"></team-card>
</div>
and
(function() {
new Vue({
el: '#app',
components: {
teamCard: TeamCard
}
})
})();
I'm new to Vue and have been trying to figure this out for days without finding a solution that works...
How do I add an external vue-component multiple times #click on button?
Hopefully my pseudo-code below will explain what i'm trying to do.
<template>
<div>
<Piece/>
<!-- HERE I WANT TO ADD MULTIPLE "<Piece/>" #click on below button -->
<button type="button" #click="addPiece">Add Piece</button>
</div>
</template>
<script>
import Piece from "#/components/Piece.vue";
export default {
name: "PiecesModal",
components: {
Piece,
},
methods: {
addPiece () {
this.components.push(Piece)
}
},
};
</script>
Vue is "data driven"
Instead of wasting time "figuring this out for days", just read the excellent docs, List Rendering in this case...
const piece = Vue.component('Piece', {
props: ['number'],
template: `<div> Piece {{ number }} </div>`
})
const app = new Vue({
el: "#app",
components: { piece },
data() {
return {
counter: 0,
pieces: []
}
},
methods: {
addPiece() {
this.pieces.push(this.counter)
this.counter++
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button type="button" #click="addPiece">Add Piece</button>
<hr>
<Piece v-for="piece in pieces" :key="piece" :number="piece"/>
</div>
Currently I am using as
<template> ... </template>
<script src="test1.js"> </script>
Where all my business logics are written in test1.js. Now I need to use test2.js with same template. I need to reuse the template with different component.
My current code goes like this...
common.vue
<template>
<div>
{{ page }}
</div>
<template>
<script src="../scripts/test1.js"></script>
Where in test1.js
export default {
name: 'home',
components: {
test: test
},
data() {
return {
page: "test1",
}
}
}
But also i need to use common.vue in my test2.js. Which i am not able to import both the .js seperately.
In angular we can write the fallowing late bindig which binds .html and .js(in ui.router)
.state('home', {
url:'/',
templateUrl: 'templates/home.html',
controller: 'HomeController'
})
Is there something similar to this?
You can share the template through the id attribute.
Vue.component('my-comp1', {
template: '#generic',
data () {
return {
text: 'I am component 1'
}
}
})
Vue.component('my-comp2', {
template: '#generic',
data () {
return {
text: 'I am component 2'
}
}
})
new Vue({
el: '#app'
})
<div id="app">
<my-comp1></my-comp1>
<my-comp2></my-comp2>
</div>
<template id="generic">
<div>
<p>{{ text }}</p>
</div>
</template>
<script src="https://unpkg.com/vue"></script>
I'm trying to import an external jQuery plugin in a Vuejs component.
The plugin is nested.js
How can I do?
Thanks
You can import in script the plugin and use it in your functions, I will give you an example of datepicker which is a jquery based plugin.
<template>
<div class="input-group date">
<input type="text" class="form-control datepicker" :name="name" :value="value" #keyup.enter="validate" #blur="validate">
</div>
</template>
<script>
import "bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css"
import "bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"
import Moment from 'moment'
export default {
props: {
value: String,
name: String,
orientation: {
type: String,
default: "top"
}
},
data() {
return {}
},
mounted() {
var vm = this;
$(this.$el).find(".datepicker").datepicker({
language: this.$store.state.currentLanguage,
format: "dd/mm/yyyy",
autoclose: true,
orientation: vm.orientation
}).on("show", () => { do what ever you want }
}
</script>
Hope this will help.
Maybe you can consider a directive for that.
First load jquery and nested.js.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.nested/1.01/jquery.nested.min.js"></script>
Then create a new directive.
Vue.directive('nested', function(el, binding) {
$(el).nested(binding.value)
})
Example usage:
<div v-nested="nestedJsOptions">
...
</div>
In your component:
data: {
return {
nestedJsOptions: {
minWidth: 100,
gutter: 10,
// ..
}
}
}