How to use an npm package component with Vite + Vue?

Question

What would be the steps to add a component to Vite with Vue, as an npm package?

I assumed these:

1. npm install example
2. open src/App.vue and add import Example from 'example'
3. in App.vue, in <template>, add <Example />

Is that correct?

I am trying to install and use vue-select like so, but it's not working:

Answer 1

Your screenshot shows you're importing vSelect in a <script> block, and expecting it to be automatically registered for the component's template. That would only work in a <script setup> block.

However, your GitHub repo (which seems to be different from the screenshot you posted) reveals other issues in your code:

1. You're using Vue 2 code to globally register the v-select component in your Vue 3 app. In Vue 3, global component registration is done from the application instance (i.e., returned from createApp()).

// main.js
import VSelect from 'vue-select';

// Vue.component('v-select', VSelect); ❌ Vue 2 code

import { createApp } from 'vue'
import App from './App.vue'

createApp(App)
  .component('v-select', VSelect) ✅
  .mount('#app')

2. You're using @import (CSS syntax) to import your SCSS file in the <script> block. Either move the CSS into a <style lang="scss"> block; or remove the @ prefix, which would create a valid import for <script>.

<script setup>
// @import 'vue-select/src/scss/vue-select.scss'; ❌ The @ prefix is invalid in <script>
import 'vue-select/src/scss/vue-select.scss'; ✅
</script>

<!-- OR -->
<style lang="scss">
@import 'vue-select/src/scss/vue-select.scss';
</style>

3. Your project is missing sass, which is required to process SCSS files. You can install it as a dev dependency with:

$ npm i -D sass

Here's a demo with the fixes pointed out above.