Giter Site home page Giter Site logo

vue-email / cli Goto Github PK

View Code? Open in Web Editor NEW
2.0 0.0 0.0 136 KB

⚡️ Vue Email Generation CLI Experience

Home Page: https://vuemail.net/plugins/cli

License: MIT License

JavaScript 6.63% TypeScript 77.09% Shell 16.28%
cli email-template-builder emails nuxt ssr vue-email

cli's Issues

Error "Cannot find module" if you include a component in an email page 

import Header from '@/components/Header.vue'
And use <Header />

npx vue-email export --dir=src/pages --pretty=true
ℹ ✨ Generating HTML versions of emails                                                                                                                                                                                                                                                                                                                   03:40:12
Error loading component node:internal/modules/cjs/loader:1080
  throw err;
  ^

Error: Cannot find module '@/components/Header.vue'
Require stack:
- G:\projects\vue-mail\node_modules\import-string\dist\x5D0IVk9TuHo-qVRIm8yo.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
    at Module._load (node:internal/modules/cjs/loader:922:27)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at require (node:internal/modules/cjs/helpers:119:18)
    at G:\projects\vue-mail\node_modules\import-string\dist\x5D0IVk9TuHo-qVRIm8yo.js:43:29
    at Script.runInContext (node:vm:135:12)
    at Script.runInNewContext (node:vm:140:17)
    at Object.runInNewContext (node:vm:292:38)
    at requireFromString (G:\projects\vue-mail\node_modules\module-from-string\dist\index.js:134:6)
    at importFromStringSync (G:\projects\vue-mail\node_modules\module-from-string\dist\index.js:248:12) {
  code: 'MODULE_NOT_FOUND',

Okay, so I've tried that with the exact structure 

          Okay, so I've tried that with the exact structure

emails/
  Email/
     BrandedHeader.vue
  MyMail.vue

BrandedHeader.vue

<script setup>
import { ESection, EText } from "vue-email";
</script>

<template>
  <e-heading as="h1">
    Some Brand Name
  </e-heading>
</template>

MyMail.vue

<script setup>
import { EButton, EHtml } from 'vue-email'
</script>

<template>
  <EHtml lang="en">

    <BrandedHeader/>

    <EButton href="https://example.com" style="color: #61dafb">
      Click me
    </EButton>
  </EHtml>
</template>

now I run the command in the root

npx vue-email export

And get the output

$ npx vue-email export
ℹ ✨ Generating HTML versions of emails                                                                                                                                                                                                                  13:01:06
[Vue warn]: Failed to resolve component: BrandedHeader
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
ℹ 🪄 Generated MyMail                                                                                                                                                                                                                                    13:01:06
ℹ 🪄 Generated Email/BrandedHeader

And this is the generated HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="__vue-email" lang="en" dir="ltr">
<BrandedHeader></BrandedHeader>
<a data-id="__vue-email-button"
   style="line-height:100%;text-decoration:none;display:inline-block;max-width:100%;color:#61dafb;"
   href="https://example.com" target="_blank"><span><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%;mso-text-raise:0" hidden>&nbsp;</i><![endif]--></span><span
  style="max-width:100%;display:inline-block;line-height:120%;text-decoration:none;text-transform:none;mso-padding-alt:0px;mso-text-raise:0;"> Click me </span><span><!--[if mso]><i style="letter-spacing: 0px;mso-font-width:-100%" hidden>&nbsp;</i><![endif]--></span></a>
</html>

I've tried that also with imports, but this leads to an error.

Am I missing something like an extra config file or something like that?

Originally posted by @mklueh in vue-email/vue-email#82 (comment)

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.