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 Introduction

vue-email

npm version npm downloads JSDocs License

💌 vue-email

Simple way to build email templates in vue.

Important

Experimental and under heavy development. APIs are subject to change.

Features

Ecosystem

Package Version
Vue-Email tres version
Nuxt nuxt version
SSR Compiler cientos version
CLI tres version

Installation

# Using npm
npm install vue-email

# Using yarn
yarn add vue-email

# Using pnpm
pnpm add vue-email

💻 Development

  1. Clone this repository
  2. Enable Corepack using corepack enable
  3. Install dependencies using pnpm install

🛟 Support

If you like our work, please feel to free to support us!

License

MIT License © 2023-PRESENT Vue Email

cli's People

Contributors

flowko avatar

Stargazers

avatar avatar

cli's Issues

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.