Code Monkey home page Code Monkey logo

my-library-vue-ts's Introduction

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

Type Support For .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

  1. Disable the built-in TypeScript Extension
    1. Run Extensions: Show Built-in Extensions from VSCode's command palette
    2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
  2. Reload the VSCode window by running Developer: Reload Window from the command palette.

my-library-vue-ts's People

Contributors

israeldcastro avatar

Stargazers

武兴师 avatar  avatar Emma Cornbower avatar  avatar José A. Puche avatar Martin Malinda avatar  avatar Daniel David avatar Lynch Cai avatar  avatar Jesus David Lopez  avatar  avatar 酷甚么喵 avatar Kaushlendra Shukla avatar  avatar Stephan Simonett avatar notandor avatar Mostafa Rahmati avatar  avatar Michael Raguse avatar Eugene avatar Jannes Höke avatar Absurdumnoil avatar Ken Eucker avatar

Watchers

James Cloos avatar  avatar

my-library-vue-ts's Issues

Declaration file not being created

Following your exact tutorial on how to create this.
When importing the component into a new project i get the error that there is no declaration file found.

Could not find a declaration file for module 'blocks-ui'. '/blocks-ui/dist/blocks-ui.umd.js' implicitly has an 'any' type.   Try `npm i --save-dev @types/blocks-ui` if it exists or add a new declaration (.d.ts) file containing `declare module 'blocks-ui';`

My TS config

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "declaration": true,
    "outDir": "dist",
    "declarationDir": "dist",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Vite.config.ts

import * as path from 'path'
import dts from "vite-plugin-dts"
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import typescript2 from 'rollup-plugin-typescript2'

export default defineConfig({
  plugins: [
    vue(),
    dts({
      insertTypesEntry: true,
    }),
    typescript2({
      check: false,
      include: ["src/**/*.vue", "src/**/*.ts"],
      tsconfigOverride: {
        compilerOptions: {
          outDir: "dist",
          sourceMap: true,
          declaration: true,
          declarationMap: true,
        },
      },
      exclude: ["vite.config.ts"]
    })
  ],
  build: {
    cssCodeSplit: true,
    lib: {
      // Could also be a dictionary or array of multiple entry points
      entry: "src/index.ts",
      name: 'blocksAuth',
      formats: ["es", "cjs", "umd"],
      fileName: format => `blocks-auth.${format}.js`
    },
    rollupOptions: {
      // make sure to externalize deps that should not be bundled
      // into your library
      input: {
        main: path.resolve(__dirname, "src/index.ts")
      },
      external: ['vue'],
      output: {
        assetFileNames: (assetInfo) => {
          if (assetInfo.name === 'main.css') return 'blocks-auth.css';
          return assetInfo.name;
        },
        exports: "named",
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
})

How to import css style beside component?

Case: I am using a component exported from my library, but when using it, the style is not persisted

Example:
it turns out that it shows the unstyled component;
Captura de tela de 2023-01-19 02-16-58

When to show style
Captura de tela de 2023-01-19 02-20-05

Could not find a declaration file for module 'my-library-vue-ts'.

Hi @IsraelDCastro I was following this tutorial
https://medium.com/@blaster203/how-to-create-a-component-library-with-vue-3-vitejs-typescript-8eb41f799045

Any idea why TS is complaining about types here

Could not find a declaration file for module 'my-library-vue-ts'. '' implicitly has an 'any' type.
There are types at '/Users/felixclement/Documents/Dev/frontend-vuejs3/synps/node_modules/my-library-vue-ts/dist/main.d.ts', but this result could not be resolved when respecting package.json "exports". The 'my-library-vue-ts' library may need to update its package.json or typings.ts(7016)

Screenshot 2023-11-02 at 2 45 10 PM

VSCode intellisense on Vue files without importing

In your ~/src/components/main.ts file you add the components as globals and export them:

app.component('HelloWorld', HelloWorld);
app.component('MyButton', MyButton);

and

export { HelloWorld, MyButton };

A project can use these components by either installing the plugin and making the components global, or by importing the individual components.

However, VSCode IntelliSense seems to only work if the components are imported. If only installed using app.use(), then IntelliSense doesn't work with the components.

Is this a known issue, and do you know how to address it?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.