Add datepicker to simple vuejs app

Question

I have this app running https://github.com/scotch-io/vue-todo

I have trying too add a datepicker field to each todo. I am using https://github.com/charliekassel/vuejs-datepicker.

I installed the datepicker with npm install vuejs-datepicker --save and in src/App.vue added:

import Datepicker from 'vuejs-datepicker';

Vue.component('my-component', {
    components: {
        Datepicker
    }
});

Now I am getting the error:

ERROR in ./src/App.vue

  ✘  https://google.com/#q=import%2Ffirst       Absolute imports should come before relative imports  
  /Users/marklocklear/sandbox/vuejs/vue-todo/src/App.vue:17:24
  import Datepicker from 'vuejs-datepicker';
                          ^

  ✘  http://eslint.org/docs/rules/no-undef      'Vue' is not defined                                  
  /Users/marklocklear/sandbox/vuejs/vue-todo/src/App.vue:19:1
  Vue.component('my-component', {
   ^

  ✘  http://eslint.org/docs/rules/indent        Expected indentation of 2 spaces but found 4          
  /Users/marklocklear/sandbox/vuejs/vue-todo/src/App.vue:20:5
      components: {
       ^

  ✘  http://eslint.org/docs/rules/indent        Expected indentation of 6 spaces but found 8          
  /Users/marklocklear/sandbox/vuejs/vue-todo/src/App.vue:21:9
          Datepicker
           ^

  ✘  http://eslint.org/docs/rules/comma-dangle  Missing trailing comma                                
  /Users/marklocklear/sandbox/vuejs/vue-todo/src/App.vue:21:19
          Datepicker
                     ^

  ✘  http://eslint.org/docs/rules/comma-dangle  Missing trailing comma                                
  /Users/marklocklear/sandbox/vuejs/vue-todo/src/App.vue:22:6
      }
        ^


✘ 6 problems (6 errors, 0 warnings)


Errors:
  2  http://eslint.org/docs/rules/comma-dangle
  2  http://eslint.org/docs/rules/indent
  1  http://eslint.org/docs/rules/no-undef
  1  https://google.com/#q=import%2Ffirst
 @ ./src/main.js 3:0-24
 @ multi ./build/dev-client ./src/main.js

All of these errors seem very self-explanatory. What are you having trouble with specifically? — thanksd
– thanksd, Commented Feb 21, 2018 at 16:51
This is an issue with also importing eslint I believe. Do a web search for the error message absolute imports should come before relative imports and eslint you may find something that will help you. Also are you importing Vue before requiring the component. That also may be the cause of the Vue not defined error — skribe
– skribe, Commented Feb 21, 2018 at 16:52

Tim Hutchison · Accepted Answer · 2018-02-21 19:42:19Z

1

Looking at the code in src/App.vue, you should add the import under the imports that already exist and then add Datepicker to the list of components.

<script>
import sweetalert from 'sweetalert';
import Datepicker from 'vuejs-datepicker'
import TodoList from './components/TodoList';
import CreateTodo from './components/CreateTodo';    

export default {
  name: 'app',
  components: {
    TodoList,
    CreateTodo,
    Datepicker
  },
. 
.
.
</script>

edited Feb 21, 2018 at 19:42

answered Feb 21, 2018 at 16:51

Tim Hutchison

3,65311 gold badges47 silver badges79 bronze badges

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

Comments

Mark Locklear · Accepted Answer · 2018-02-21 18:47:34Z

0

Your answer was close Tim, I just needed to move the import up. Here is what is working for me:

<script>
import sweetalert from 'sweetalert';
import Datepicker from 'vuejs-datepicker';
import TodoList from './components/TodoList';
import CreateTodo from './components/CreateTodo';

export default {
  name: 'app',
  components: {
    TodoList,
    CreateTodo,
    Datepicker,
  },

answered Feb 21, 2018 at 18:47

Mark Locklear

5,3951 gold badge58 silver badges92 bronze badges

3 Comments

Tim Hutchison Over a year ago

Lumbee, I updated my answer. Could you accept as correct answer?

Mark Locklear Over a year ago

Sure. Any suggestions on how to get the field to display correctly? I am trying this in CreateTodo.vue gist.github.com/marklocklear/d762bcf0e6c9129f78fe429b3222f1a8 and am just getting a regular text field, but no picker.

Tim Hutchison Over a year ago

The picker looks like a regular field until you click on it. Once you click on it, the picker will pop up.

Collectives™ on Stack Overflow

Add datepicker to simple vuejs app

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related