Skip to content

πŸŒ† πŸ–‡ Autocomplete for nuxt assets, icons and images paths

License

Notifications You must be signed in to change notification settings

victorgarciaesgi/nuxt-assets-paths

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

12 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸŒ† πŸ–‡ Nuxt assets paths

npm version npm downloads npm downloads

Generate icon paths objects and Typescript interface for your assets and static files

Typescript is recommanded for this module usage

You can also check nuxt-typed-router for route names autocomplete

Installation

yarn add -D nuxt-assets-paths

#or
npm install -D nuxt-assets-paths

Configuration

First, register the module in the nuxt.config.[js|ts]

const config = {
  ...,
  modules: [
    'nuxt-assets-paths',
  ]
}

In your nuxt.config

import 'nuxt-assets-paths';

export default {
  assetsPaths: {
    // Options
  },
};

Options:

export interface NuxtAssetsPathsOptions {
  //
  /**
   * Path to where you cant the file to be saved (ex: "./src/models/assets.ts")
   * @default "<srcDir>/__assetsPaths.ts"
   */
  filePath?: string;

  /** Name of the routesNames object in the generated file (ex: "routesTree")
   * @default "assetsPaths"
   * */
  pathsObjectName?: string;

  /**
   * Enables static files paths generation
   * @default true */
  staticPaths?: boolean;
}

Exemple:

import 'nuxt-assets-paths';

export default {
  assetsPaths: {
    filePath: 'src/models/__assetsPaths.ts',
  },
};

Usage in Vue/Nuxt

- assetsPaths global object

At build , the module will create a file with the global object of the assets paths inside.

Usage

Given this structure

β”œβ”€β”€ assets
    β”œβ”€β”€ icons
        β”œβ”€β”€ actions
            β”œβ”€β”€ done.png
            β”œβ”€β”€ done.svg
        β”œβ”€β”€ home.svg
    └── images
        β”œβ”€β”€ background.svg
        β”œβ”€β”€ flower.webp
└── ...

The generated file will look like this

export const assetsPaths = {
  icons: {
    actions: {
      done_png: '~assets/icons/actions/done.png',
      done_svg: '~assets/icons/actions/done.svg',
    },
    home: '~assets/icons/home.svg',
  },
  images: {
    background: '~assets/images/background.svg',
    flower: '~assets/images/flower.webp',
  },
};
export type AssetsPaths =
  | '~assets/icons/actions/done.png'
  | '~assets/icons/actions/done.svg'
  | '~assets/icons/home.svg'
  | '~assets/images/background.svg'
  | '~assets/images/flower.webp';

You can now just import it

<template>
  <img :src="assetsPaths.actions.done_svg" />
</template>
import { assetsPaths } from '~/models/assetsPaths.ts';

export default {
  data: () => ({
    assetsPaths,
  }),
};

And type your component props (Volar recommanded in VSCode)

import { Proptype } from 'vue';
import { AssetsPaths } from '...yourPath/__assetsPaths';

export default defineComponent({
  name: 'Image',
  props: {
    src: { type: String as PropType<AssetsPaths> },
  },
});

Advanced usage (for Typescript users)

Create a plugin nuxt-assets-paths.ts, and register it in your nuxt.config.js

import { assetsPaths } from '...your file path';

export default (ctx, inject) => {
  inject('assets', assetsPaths);
};

Then create shims a file in ~/shims/nuxt.d.ts

import { assetsPaths } from '...your file path';

declare module 'vue/types/vue' {
  interface Vue {
    $assets: typeof assetsPaths;
  }
}

You will now have $assets exposed in all your component without importing it and it will be typed automaticaly!

<template>
  <img :src="$assets.actions.done_svg" />
</template>

Development

  1. Clone this repository
  2. Install dependencies using yarn or npm install

πŸ“‘ License

MIT License