How do I use assets correctly?

Hey! When running in dev mode, the following works:

// Component in src/components/
<img src="../../assets/icon.svg" />

… and using any other path here doesn’t seem to work.

But then, when running build, I get the following error:

error during build:
Error: Could not resolve '../../assets/icon.svg' from src/components/Tweets.vue
    at error (/Users/user/code/bugle-vue/node_modules/.pnpm/rollup@2.57.0/node_modules/rollup/dist/shared/rollup.js:158:30)
    at ModuleLoader.handleResolveId (/Users/user/code/bugle-vue/node_modules/.pnpm/rollup@2.57.0/node_modules/rollup/dist/shared/rollup.js:22263:24)
    at /Users/user/code/bugle-vue/node_modules/.pnpm/rollup@2.57.0/node_modules/rollup/dist/shared/rollup.js:22257:26
 ELIFECYCLE  Command failed with exit code 1.
ERROR: "build:web" exited with 1.
 ELIFECYCLE  Command failed with exit code 1.

How do I use assets correctly?

[Elliot67]

Couldn’t figure out how to use assets too, made some search so here is a summary :

• extension/assets is a directory for the manifest assets only.
• if you need to include assets in your vue components, you have to create an src/assets folder and include them with <img src="/assets/icon.svg" alt="" />. Assets included in the app will be copied to the extension/dist/assets folder on build.

At that point everything is working but you might have duplicated assets inside extension/assets and src/assets. To avoid that, you can create a script that will copy files from src/assets/static to extension/assets. It will be used the same way as manifest.ts write the manifest.json file.

Create the script to copy files, inside scripts/static-assets.ts

import fs from 'fs-extra';
import { r, log } from './utils';

export async function writeStaticAssets(): Promise<void> {
  // Name of the files
  const assetNames = ['icon-128.png', 'icon-512.png', 'icon.svg'];
  const outputDir = r('extension/assets');

  if (!fs.existsSync(outputDir)) {
    await fs.mkdir(outputDir);
  }

  const promises = assetNames.map((name) => fs.copyFile(r(`src/assets/static/${name}`), `${outputDir}/${name}`));
  await Promise.all(promises);

  log('PRE', 'write static assets : ' + assetNames.join(', '));
}

writeStaticAssets();

Then edit scripts/prepare.ts to execute our script :

function writeStaticAssets() {
  execSync('npx esno ./scripts/static-assets.ts', { stdio: 'inherit' });
}
writeStaticAssets();

if (isDev) {
  chokidar.watch(r('src/assets/static/**')).on('change', () => {
    writeStaticAssets();
  });
}

Hope this helps someone !

[jonasmerlin]

@tmkx Solved it!