how to use raw html file in nuxt(vue)?

Question

I want to create a page Jump to the stripe payment page use stripe-samples/firebase-subscription-payments . so I placed it's html/css/js file(which in the "public" folder) to my nuxt app's /static. However, since it is for static files only, so vuex and plugins could not be used. Fortunately, the tag in html reads firebase from the url, so it is possible to use firebase.

but can I put raw html/css/js files to nuxt/pages like .vue file?(I tried but couldn't..) I know the best way is to rewrite the html/js file into vue file, but it was too difficult for me as a beginner(Also, I'm Japanese and I'm not good at English,sorry). or can I use npm package and module in /static/files ? I have google it for two days and couldn't resolve it.I really need help,thank you!!

here is my code: static/public/javascript/app.js


    import firebase from firebase; 
    /*↑ it will be error "Cannot use import statement outside a module".
    but in pages/.vue files and plugins/files, it will work... 
    I also tried "import firebase from '~/plugins/firebase.js'"*/
    
    const STRIPE_PUBLISHABLE_KEY = ....

static/public/index.html

    <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-functions.js"></script>

    <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-analytics.js"></script>

    <!-- Add Firebase products that you want to use -->
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-firestore.js"></script>

↑ it read firebase from url, but I want use firebase module I've installed.

You need to port it to nuxt, it's only a process sample to guide you in what needs to be done in vanilla js, if you want the same app in vue/nuxt you need to go through it and implement it. The code in .html you put in your pages/*.vue file, then either create a plugin to load the firebase lib, or use a nuxt plugin https://firebase.nuxtjs.org/ then go through the js file app.js and convert/implement the code into models, methods etc, if you want .html files at the end you use `nuxt generate`.. hire a dev, is like an hours work — Lawrence Cherone, Jun 19 '21 at 15:01
@Lawrence Cherone I'm glad to know that it's common to rewrite to vue! At the same time, I got motivated to rewrite it in vue ^ ^Thanks for the quick answer! — Tatsuhiko Mizuno, Jun 19 '21 at 15:25
@kissu Sorry for the late comment! I'm happy to be confident that static is still not suitable for code rendering I'm a beginner so I thought it was a best practice ^^; — Tatsuhiko Mizuno, Jun 21 '21 at 15:57
No issues. Didn't meant to be rude. It's just a common mistake and I was debunking it. :) — kissu, Jun 21 '21 at 16:01
@kissu I was able to get a great answer and it was worth asking in English~ — Tatsuhiko Mizuno, Jun 21 '21 at 16:13

score 1 · Answer 1 · answered Jun 26 '21 at 08:37

1

Eventually I rewrote the js / html code to vue. Basically it is completed just by copying the js code to mounted(), but since I could not manipulate the nested template tag with js, I rewrote a part using v-if and v-for.

answered Jun 26 '21 at 08:37

Tatsuhiko Mizuno

437
6
15

DengSihan · Answer 2 · 2021-06-19T15:37:27.990

you can load the html by render() in your vue-component-file

nuxt.config.js

    build: {
        extend(config, ctx){
            config.resolve.alias['vue'] = 'vue/dist/vue.common';
        }
    }

in your vue-component-file

<script>
import myHtml from '~/path/to/your/html/my_html.html';
export default{
    render(h){
         return h({
              template: `<main>${myHtml}</main>`
         });
    }
}
</script>

and the page will be rendered as a component in your vue <router-view/> or <nuxt/>, but make sure there is no <script> tag in your my_html.html, put your js code inside the render() like below

<script>
import myHtml from '~/path/to/your/html/my_html.html';
export default{
    render(h){
         return h({
              template: `<main>${myHtml}</main>`,
              created(){
                   console.log('I have been created!')
              },
              mounted(){
                   console.log('I have been mounted!')
              },
              methods: {
                   exampleMethod(){
                        alert('this is an example')
                   }
              }
         });
    }
}
</script>

score 0 · Accepted Answer · answered Jun 20 '21 at 05:47

There are several solutions for this.

To load 3rd party scripts, you can use the following solution: https://stackoverflow.com/a/67535277/8816585

Depending on what you're trying to load, using Nuxt plugins can also be a solution: https://nuxtjs.org/docs/2.x/directory-structure/plugins/

Lastly, here is a solution on how to properly handle Stripe in Nuxt: https://stackoverflow.com/a/67504819/8816585

But static is not a place to put your code in. As told, this is for public stuff like favicons, some free pdf book that you want to share to your visitors or alike.

Didn't use firebase with Nuxt lately but those can still probably help figuring out how to write it in Nuxt, I hope.

how to use raw html file in nuxt(vue)?

3 Answers3