Materialize inside Vue.js

Question

I am new with Vue.js and I want to make my project with Materialize. I try a lot of plugins like: vue-materialize (https://github.com/paulpflug/vue-materialize), vue-material-components(https://www.npmjs.com/package/vue-material-components) and didn't work. I also tried to add jQuery plugin to webpack and I don't have any solution:

new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
}),

Now I am trying to make work a input select field. How can I make this work?

Have a look at this question on material input and this fiddle. — Saurabh
– Saurabh, Commented Dec 26, 2016 at 11:21

Gaurav · Accepted Answer · 2017-10-29 20:54:52Z

6

You can use Vue-Material to materialize your Vue project. Following are the steps that you need to follow:

Install vuematerial $ npm install --save vue-material
Import vuematerial to your main.js import VueMaterial from 'vue-material' import 'vue-material/dist/vue-material.css'
Start using vuematerial in your project Vue.use(VueMaterial)

A sample main.js file should look something like this:

import Vue from 'vue';
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css';
import App from './App';
import router from './router';

Vue.use(VueMaterial)
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
});

You will now be able to use vuematerial components inside your template.

edited Oct 29, 2017 at 20:54

answered Oct 29, 2017 at 20:34

Gaurav

6098 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oswaldo · Accepted Answer · 2017-05-11 12:40:51Z

Here is my setup to use Materialize with Vue Webpack template:

build/webpack.base.conf.js

var webpack = require('webpack')
module.exports =
  resolve: {
    alias: {
      ...
      'jquery': 'materialize-css/node_modules/jquery/dist/jquery.js'
    }
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        ...
        options: {
          limit: 10000
  ....
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.$': 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
}

index.html

<head>
  ...
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

package.json

{
  ...
  "dependencies": {
    "materialize-css": "^0.98.2",
  ...
  "devDependencies": {
    "@types/jquery": "^2.0.43", // ==> if using typescript

src/main.js

import 'materialize-css'
import 'materialize-css/dist/css/materialize.css'

So, for a "input select field" like below:

<div class="input-field" ref="myInput">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label>
</div>

...you could put this code in your mounted lifecycle hook:

mounted() {
  $(this.$refs.myInput).material_select()

Sandun Madola · Accepted Answer · 2017-02-09 03:03:17Z

-4

Vue.js given link by you reffers Materializecss and both are look same. Here I have added fully working code with drop down button.

You can just copy and paste following code to a text file and save it as a .html file (ex: name.html). You can edit this code by adding relevant code in between the comment  and .

Click the Run code Snippet button below to test online and you can see DROP ME! button. Once you click it you can see how drop down works.

More details refer materializecss which is more user friendly than the link you have given.

<!DOCTYPE html>
<html>

    <head>
        <title>Slider</title>
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>

    <body>
        <!--your code start-->
        
              <!-- Dropdown Trigger -->
              <a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>

              <!-- Dropdown Structure -->
              <ul id='dropdown1' class='dropdown-content'>
                <li><a href="#!">one</a></li>
                <li><a href="#!">two</a></li>
                <li class="divider"></li>
                <li><a href="#!">three</a></li>
              </ul>      
      
        <!--your code end-->

        <!--Import jQuery before materialize.js-->
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

        <!-- Compiled and minified JavaScript -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
     
    </body>

</html>

edited Feb 9, 2017 at 3:03

answered Feb 8, 2017 at 12:09

Sandun Madola

8882 gold badges11 silver badges26 bronze badges

2 Comments

Oswaldo Over a year ago

where is vue in example? it's part of main question

Sandun Madola Over a year ago

@oswaldo Thank you for the comment. Yes, you are right. But the provided link contains 'Materializecss'. Therefore I clearly mentioned that I am referring Materializecss since sometimes it may be helpful him or others users. Have a nice day. :)

Collectives™ on Stack Overflow

Materialize inside Vue.js

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related