Vue Fullpage Unkown element

I have a issue and I tried to solved but no results.

I install vue-fullpage, and I imported this and css.

But I have the next error

Unknown custom element: <full-page>

If I check the "app.js", the Vue component full-page is loaded, but it still doesn't work

The code:

<template>

  <div>

    <full-page :options="options" id="fulp" ref="fullpage">

      <div class="section">

        <h3>vue-fullpage.js</h3>

      </div>

      <div class="section">

        <div class="slide">

          <h3>Slide 2.1</h3>

        </div>

        <div class="slide">

          <h3>Slide 2.2</h3>

        </div>

        <div class="slide">

          <h3>Slide 2.3</h3>

        </div>

      </div>

      <div class="section">

        <h3>Section 3</h3>

      </div>

    </full-page>

  </div>

</template>



<script> 

 import FullPage from 'vue-fullpage.js'





  export default {

    name: 'Test full page',

    data() {

      return {

        options: {

          navigation: true,

          anchors: ['page1', 'page2', 'page3'],

          sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9',

            '#b4b8ab'

          ]

        },

      }

    },



  }



</script>



<style>

  @import 'https://unpkg.com/fullpage.js/dist/fullpage.min.css';



</style>

Update:
Also i tried to put the attr components:

export default {

        name: 'Test full page',

        components: {FullPage},

        data() {

          return {

            options: {

              navigation: true,

              anchors: ['page1', 'page2', 'page3'],

              sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9',

                '#b4b8ab'

              ]

            },

          }

        },

But I get other error with "Vue.component is not a function"

Any ideas?

edited Nov 26 '18 at 0:37

asked Nov 26 '18 at 0:15

Carloscito

58118

If I put it, I get 2 erros, first unkown element and then Vue.component is not a function

– Carloscito
Nov 26 '18 at 0:21

Please update your question so I don't have to guess where you put it

– Phil
Nov 26 '18 at 0:28

Done. I updated the post

– Carloscito
Nov 26 '18 at 0:38

Your code doesn't look anything like the usage guide. What documentation are you following?

– Phil
Nov 26 '18 at 1:05

That. I tried put it in main.js, the error, after I follow a youtube video, and same error. Don't find the component, I don't know why. I install other component to test and work perfect, just happen with it

– Carloscito
Nov 26 '18 at 1:09

add a comment |

I have a issue and I tried to solved but no results.

I install vue-fullpage, and I imported this and css.

But I have the next error

Unknown custom element: <full-page>

If I check the "app.js", the Vue component full-page is loaded, but it still doesn't work

The code:

<template>

  <div>

    <full-page :options="options" id="fulp" ref="fullpage">

      <div class="section">

        <h3>vue-fullpage.js</h3>

      </div>

      <div class="section">

        <div class="slide">

          <h3>Slide 2.1</h3>

        </div>

        <div class="slide">

          <h3>Slide 2.2</h3>

        </div>

        <div class="slide">

          <h3>Slide 2.3</h3>

        </div>

      </div>

      <div class="section">

        <h3>Section 3</h3>

      </div>

    </full-page>

  </div>

</template>



<script> 

 import FullPage from 'vue-fullpage.js'





  export default {

    name: 'Test full page',

    data() {

      return {

        options: {

          navigation: true,

          anchors: ['page1', 'page2', 'page3'],

          sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9',

            '#b4b8ab'

          ]

        },

      }

    },



  }



</script>



<style>

  @import 'https://unpkg.com/fullpage.js/dist/fullpage.min.css';



</style>

Update:
Also i tried to put the attr components:

export default {

        name: 'Test full page',

        components: {FullPage},

        data() {

          return {

            options: {

              navigation: true,

              anchors: ['page1', 'page2', 'page3'],

              sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9',

                '#b4b8ab'

              ]

            },

          }

        },

But I get other error with "Vue.component is not a function"

Any ideas?

edited Nov 26 '18 at 0:37

asked Nov 26 '18 at 0:15

Carloscito

58118

If I put it, I get 2 erros, first unkown element and then Vue.component is not a function

– Carloscito
Nov 26 '18 at 0:21

Please update your question so I don't have to guess where you put it

– Phil
Nov 26 '18 at 0:28

Done. I updated the post

– Carloscito
Nov 26 '18 at 0:38

Your code doesn't look anything like the usage guide. What documentation are you following?

– Phil
Nov 26 '18 at 1:05

That. I tried put it in main.js, the error, after I follow a youtube video, and same error. Don't find the component, I don't know why. I install other component to test and work perfect, just happen with it

– Carloscito
Nov 26 '18 at 1:09

add a comment |

I have a issue and I tried to solved but no results.

I install vue-fullpage, and I imported this and css.

But I have the next error

Unknown custom element: <full-page>

If I check the "app.js", the Vue component full-page is loaded, but it still doesn't work

The code:

<template>

  <div>

    <full-page :options="options" id="fulp" ref="fullpage">

      <div class="section">

        <h3>vue-fullpage.js</h3>

      </div>

      <div class="section">

        <div class="slide">

          <h3>Slide 2.1</h3>

        </div>

        <div class="slide">

          <h3>Slide 2.2</h3>

        </div>

        <div class="slide">

          <h3>Slide 2.3</h3>

        </div>

      </div>

      <div class="section">

        <h3>Section 3</h3>

      </div>

    </full-page>

  </div>

</template>



<script> 

 import FullPage from 'vue-fullpage.js'





  export default {

    name: 'Test full page',

    data() {

      return {

        options: {

          navigation: true,

          anchors: ['page1', 'page2', 'page3'],

          sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9',

            '#b4b8ab'

          ]

        },

      }

    },



  }



</script>



<style>

  @import 'https://unpkg.com/fullpage.js/dist/fullpage.min.css';



</style>

Update:
Also i tried to put the attr components:

export default {

        name: 'Test full page',

        components: {FullPage},

        data() {

          return {

            options: {

              navigation: true,

              anchors: ['page1', 'page2', 'page3'],

              sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9',

                '#b4b8ab'

              ]

            },

          }

        },

But I get other error with "Vue.component is not a function"

Any ideas?

edited Nov 26 '18 at 0:37

asked Nov 26 '18 at 0:15

Carloscito

58118

I have a issue and I tried to solved but no results.

I install vue-fullpage, and I imported this and css.

But I have the next error

Unknown custom element: <full-page>

If I check the "app.js", the Vue component full-page is loaded, but it still doesn't work

The code:

<template>

  <div>

    <full-page :options="options" id="fulp" ref="fullpage">

      <div class="section">

        <h3>vue-fullpage.js</h3>

      </div>

      <div class="section">

        <div class="slide">

          <h3>Slide 2.1</h3>

        </div>

        <div class="slide">

          <h3>Slide 2.2</h3>

        </div>

        <div class="slide">

          <h3>Slide 2.3</h3>

        </div>

      </div>

      <div class="section">

        <h3>Section 3</h3>

      </div>

    </full-page>

  </div>

</template>



<script> 

 import FullPage from 'vue-fullpage.js'





  export default {

    name: 'Test full page',

    data() {

      return {

        options: {

          navigation: true,

          anchors: ['page1', 'page2', 'page3'],

          sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9',

            '#b4b8ab'

          ]

        },

      }

    },



  }



</script>



<style>

  @import 'https://unpkg.com/fullpage.js/dist/fullpage.min.css';



</style>

Update:
Also i tried to put the attr components:

export default {

        name: 'Test full page',

        components: {FullPage},

        data() {

          return {

            options: {

              navigation: true,

              anchors: ['page1', 'page2', 'page3'],

              sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9',

                '#b4b8ab'

              ]

            },

          }

        },

But I get other error with "Vue.component is not a function"

Any ideas?

vue.js

edited Nov 26 '18 at 0:37

asked Nov 26 '18 at 0:15

Carloscito

58118

edited Nov 26 '18 at 0:37

asked Nov 26 '18 at 0:15

Carloscito

58118

edited Nov 26 '18 at 0:37

asked Nov 26 '18 at 0:15

Carloscito

58118

asked Nov 26 '18 at 0:15

Carloscito

58118

asked Nov 26 '18 at 0:15

Carloscito

58118

If I put it, I get 2 erros, first unkown element and then Vue.component is not a function

– Carloscito
Nov 26 '18 at 0:21

Please update your question so I don't have to guess where you put it

– Phil
Nov 26 '18 at 0:28

Done. I updated the post

– Carloscito
Nov 26 '18 at 0:38

Your code doesn't look anything like the usage guide. What documentation are you following?

– Phil
Nov 26 '18 at 1:05

That. I tried put it in main.js, the error, after I follow a youtube video, and same error. Don't find the component, I don't know why. I install other component to test and work perfect, just happen with it

– Carloscito
Nov 26 '18 at 1:09

add a comment |

If I put it, I get 2 erros, first unkown element and then Vue.component is not a function

– Carloscito
Nov 26 '18 at 0:21

Please update your question so I don't have to guess where you put it

– Phil
Nov 26 '18 at 0:28

Done. I updated the post

– Carloscito
Nov 26 '18 at 0:38

Your code doesn't look anything like the usage guide. What documentation are you following?

– Phil
Nov 26 '18 at 1:05

That. I tried put it in main.js, the error, after I follow a youtube video, and same error. Don't find the component, I don't know why. I install other component to test and work perfect, just happen with it

– Carloscito
Nov 26 '18 at 1:09

If I put it, I get 2 erros, first unkown element and then Vue.component is not a function

– Carloscito
Nov 26 '18 at 0:21

Please update your question so I don't have to guess where you put it

– Phil
Nov 26 '18 at 0:28

Done. I updated the post

– Carloscito
Nov 26 '18 at 0:38

Your code doesn't look anything like the usage guide. What documentation are you following?

– Phil
Nov 26 '18 at 1:05

That. I tried put it in main.js, the error, after I follow a youtube video, and same error. Don't find the component, I don't know why. I install other component to test and work perfect, just happen with it

– Carloscito
Nov 26 '18 at 1:09

add a comment |

1 Answer
1

active

oldest

votes

You don't appear to be using the vue-fullpage.js library according to their guide.

They provide the library as a Vue plugin so you need to use it in your root Vue instance, eg

// main.js or whatever

import Vue from 'vue'

import VueRouter from 'vue-router'

import VueFullPage from 'vue-fullpage.js'



Vue.use(VueRouter) // Note: Do NOT try and pass in multiple plugins

Vue.use(VueFullPage)

This will install the full-page component globally so you don't need to import it into your component.

edited Nov 26 '18 at 1:13

answered Nov 26 '18 at 1:09

Phil

99.4k12145163

I tried global: .. import FullPage from 'vue-fullpage.js' Vue.use(Router, FullPage) ... but I still.

– Carloscito
Nov 26 '18 at 1:10

@Carloscito Vue.use does not take multiple plugin arguments. Use separate Vue.use() calls for each

– Phil
Nov 26 '18 at 1:11

the name "FullPage" or "VueFullPage", same error.

– Carloscito
Nov 26 '18 at 1:11

Same error using separate Vue.use().

– Carloscito
Nov 26 '18 at 1:13

And what error would that be, exactly? Please edit your question to include your latest code and any error messages in detail

– Phil
Nov 26 '18 at 1:13

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473313%2fvue-fullpage-unkown-element%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You don't appear to be using the vue-fullpage.js library according to their guide.

They provide the library as a Vue plugin so you need to use it in your root Vue instance, eg

// main.js or whatever

import Vue from 'vue'

import VueRouter from 'vue-router'

import VueFullPage from 'vue-fullpage.js'



Vue.use(VueRouter) // Note: Do NOT try and pass in multiple plugins

Vue.use(VueFullPage)

This will install the full-page component globally so you don't need to import it into your component.

edited Nov 26 '18 at 1:13

answered Nov 26 '18 at 1:09

Phil

99.4k12145163

I tried global: .. import FullPage from 'vue-fullpage.js' Vue.use(Router, FullPage) ... but I still.

– Carloscito
Nov 26 '18 at 1:10

@Carloscito Vue.use does not take multiple plugin arguments. Use separate Vue.use() calls for each

– Phil
Nov 26 '18 at 1:11

the name "FullPage" or "VueFullPage", same error.

– Carloscito
Nov 26 '18 at 1:11

Same error using separate Vue.use().

– Carloscito
Nov 26 '18 at 1:13

And what error would that be, exactly? Please edit your question to include your latest code and any error messages in detail

– Phil
Nov 26 '18 at 1:13

add a comment |

You don't appear to be using the vue-fullpage.js library according to their guide.

They provide the library as a Vue plugin so you need to use it in your root Vue instance, eg

// main.js or whatever

import Vue from 'vue'

import VueRouter from 'vue-router'

import VueFullPage from 'vue-fullpage.js'



Vue.use(VueRouter) // Note: Do NOT try and pass in multiple plugins

Vue.use(VueFullPage)

This will install the full-page component globally so you don't need to import it into your component.

edited Nov 26 '18 at 1:13

answered Nov 26 '18 at 1:09

Phil

99.4k12145163

I tried global: .. import FullPage from 'vue-fullpage.js' Vue.use(Router, FullPage) ... but I still.

– Carloscito
Nov 26 '18 at 1:10

@Carloscito Vue.use does not take multiple plugin arguments. Use separate Vue.use() calls for each

– Phil
Nov 26 '18 at 1:11

the name "FullPage" or "VueFullPage", same error.

– Carloscito
Nov 26 '18 at 1:11

Same error using separate Vue.use().

– Carloscito
Nov 26 '18 at 1:13

And what error would that be, exactly? Please edit your question to include your latest code and any error messages in detail

– Phil
Nov 26 '18 at 1:13

add a comment |

You don't appear to be using the vue-fullpage.js library according to their guide.

They provide the library as a Vue plugin so you need to use it in your root Vue instance, eg

// main.js or whatever

import Vue from 'vue'

import VueRouter from 'vue-router'

import VueFullPage from 'vue-fullpage.js'



Vue.use(VueRouter) // Note: Do NOT try and pass in multiple plugins

Vue.use(VueFullPage)

This will install the full-page component globally so you don't need to import it into your component.

edited Nov 26 '18 at 1:13

answered Nov 26 '18 at 1:09

Phil

99.4k12145163

You don't appear to be using the vue-fullpage.js library according to their guide.

They provide the library as a Vue plugin so you need to use it in your root Vue instance, eg

// main.js or whatever

import Vue from 'vue'

import VueRouter from 'vue-router'

import VueFullPage from 'vue-fullpage.js'



Vue.use(VueRouter) // Note: Do NOT try and pass in multiple plugins

Vue.use(VueFullPage)

This will install the full-page component globally so you don't need to import it into your component.

edited Nov 26 '18 at 1:13

answered Nov 26 '18 at 1:09

Phil

99.4k12145163

edited Nov 26 '18 at 1:13

answered Nov 26 '18 at 1:09

Phil

99.4k12145163

answered Nov 26 '18 at 1:09

Phil

99.4k12145163

answered Nov 26 '18 at 1:09

Phil

99.4k12145163

I tried global: .. import FullPage from 'vue-fullpage.js' Vue.use(Router, FullPage) ... but I still.

– Carloscito
Nov 26 '18 at 1:10

@Carloscito Vue.use does not take multiple plugin arguments. Use separate Vue.use() calls for each

– Phil
Nov 26 '18 at 1:11

the name "FullPage" or "VueFullPage", same error.

– Carloscito
Nov 26 '18 at 1:11

Same error using separate Vue.use().

– Carloscito
Nov 26 '18 at 1:13

And what error would that be, exactly? Please edit your question to include your latest code and any error messages in detail

– Phil
Nov 26 '18 at 1:13

add a comment |

I tried global: .. import FullPage from 'vue-fullpage.js' Vue.use(Router, FullPage) ... but I still.

– Carloscito
Nov 26 '18 at 1:10

@Carloscito Vue.use does not take multiple plugin arguments. Use separate Vue.use() calls for each

– Phil
Nov 26 '18 at 1:11

the name "FullPage" or "VueFullPage", same error.

– Carloscito
Nov 26 '18 at 1:11

Same error using separate Vue.use().

– Carloscito
Nov 26 '18 at 1:13

And what error would that be, exactly? Please edit your question to include your latest code and any error messages in detail

– Phil
Nov 26 '18 at 1:13

I tried global: .. import FullPage from 'vue-fullpage.js' Vue.use(Router, FullPage) ... but I still.

– Carloscito
Nov 26 '18 at 1:10

@Carloscito Vue.use does not take multiple plugin arguments. Use separate Vue.use() calls for each

– Phil
Nov 26 '18 at 1:11

the name "FullPage" or "VueFullPage", same error.

– Carloscito
Nov 26 '18 at 1:11

Same error using separate Vue.use().

– Carloscito
Nov 26 '18 at 1:13

And what error would that be, exactly? Please edit your question to include your latest code and any error messages in detail

– Phil
Nov 26 '18 at 1:13

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg