javascript - how to use raw html file in nuxt(vue)? - Stack Overflow

admin管理员组

文章数量:1426959

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=".14.6/firebase.js"></script>
    <script src=".14.6/firebase-functions.js"></script>

    <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
    <script src=".14.5/firebase-analytics.js"></script>

    <!-- Add Firebase products that you want to use -->
    <script src=".14.5/firebase-auth.js"></script>
    <script src=".14.5/firebase-firestore.js"></script>

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

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./firebasejs/7.14.6/firebase.js"></script>
    <script src="https://www.gstatic./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./firebasejs/7.14.5/firebase-analytics.js"></script>

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

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

• javascript
• firebase
• vue.js
• stripe-payments
• nuxt.js

Share Improve this question Follow edited Jun 19, 2021 at 13:09 Tatsuhiko Mizuno asked Jun 19, 2021 at 13:03 Tatsuhiko MizunoTatsuhiko Mizuno 45788 silver badges1616 bronze badges 5

• 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 firebase.nuxtjs 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 Commented Jun 19, 2021 at 15:01
• @Lawrence Cherone I'm glad to know that it's mon to rewrite to vue! At the same time, I got motivated to rewrite it in vue ^ ^Thanks for the quick answer! – Tatsuhiko Mizuno Commented Jun 19, 2021 at 15:25
• @kissu Sorry for the late ment! 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 Commented Jun 21, 2021 at 15:57
• No issues. Didn't meant to be rude. It's just a mon mistake and I was debunking it. :) – kissu Commented Jun 21, 2021 at 16:01
• @kissu I was able to get a great answer and it was worth asking in English~ – Tatsuhiko Mizuno Commented Jun 21, 2021 at 16:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Eventually I rewrote the js / html code to vue. Basically it is pleted 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.

There are several solutions for this.

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

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

Lastly, here is a solution on how to properly handle Stripe in Nuxt: https://stackoverflow./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.

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

nuxt.config.js

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

in your vue-ponent-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 ponent 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>

本文标签： javascripthow to use raw html file in nuxt(vue)Stack Overflow