I'm currently experimenting with the Code Sandbox using the NPM Package vue-fixed-header. In the Code Sandbox, the fixed header is initially in the main App.vue file. My goal is to separate it into its own file by transferring all necessary components to the HelloWorld.vue component located inside the component directory. Once I made the move, the contents of the HelloWorld.vue file appear as follows:
<template>
<VueFixedHeader
:threshold="propsData.threshold"
:headerClass="propsData.headerClass"
:fixedClass="propsData.fixedClass"
>
<nav>
<el-menu>
<el-menu-item style="pointer-events: none;" index="1">
Fixed Header
</el-menu-item>
</el-menu>
</nav>
</VueFixedHeader>
</template>
<script>
import VueFixedHeader from "vue-fixed-header";
export default {
name: 'fixedHeader',
components: {
VueFixedHeader,
}
}
</script>
...
My next step was to try importing this file for use within the App.vue:
<template>
<div id="app">
<fixedHeader /> <-- attempted importation here
...
</div>
</template>
<script>
import Vue from "vue";
import fixedHeader from './components/HelloWorld' <-- tried importing file here
...
Unfortunately, my attempt at importing did not work and Code Sandbox returned an error message stating that
fixedHeader is defined but never used.