Guide on utilizing raw HTML files within Nuxt (Vue.js) framework

Question

Guide on utilizing raw HTML files within Nuxt (Vue.js) framework

I am looking to set up a page that redirects to the stripe payment page using stripe-samples/firebase-subscription-payments. I have placed its html/css/js files (found in the "public" folder) in my nuxt app's /static directory. However, since this is for static files only, I cannot utilize vuex and plugins. Luckily, the script tag in html can fetch firebase from the URL, allowing me to incorporate firebase.

Is it possible to directly add raw html/css/js files to nuxt/pages like .vue files? I attempted this but faced challenges. While the ideal solution would be to convert the html/js file into a vue file, as a beginner it proved to be too complex for me. Additionally, English is not my native language, so apologies for any errors. Can npm packages and modules be used in /static files? I have spent two days researching this without finding a solution. Any assistance would be greatly appreciated, thank you!

Here is an excerpt of my code: static/public/javascript/app.js


    import firebase from firebase; 
    /*↑ it will be error "Cannot use import statement outside a module".
    In pages/.vue files and plugins/files, however, it works. 
    I also attempted "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 fetches firebase from the URL, but I desire to employ the firebase module that I have installed.

javascript firebase vue.js stripe-payments nuxt.js

Answer 1

Answer №1

After some deliberation, I decided to rework the JavaScript/HTML code into Vue. The process involved transferring the existing JS code to the mounted() hook, but encountered challenges in manipulating the nested template tag with JS. As a solution, I incorporated v-if and v-for directives to achieve the desired functionality.

Answer 2

After some deliberation, I decided to rework the JavaScript/HTML code into Vue. The process involved transferring the existing JS code to the mounted() hook, but encountered challenges in manipulating the nested template tag with JS. As a solution, I incorporated v-if and v-for directives to achieve the desired functionality.

Answer 3

Answer №2

There are multiple solutions available for this issue.

If you need to load 3rd party scripts, one option is to refer to this solution:

Another approach could be utilizing Nuxt plugins depending on the requirements: https://nuxtjs.org/docs/2.x/directory-structure/plugins/

Additionally, there's a solution available for properly integrating Stripe in Nuxt:

Remember that the static directory is not meant for storing your code. It should only contain public assets like favicons or shared PDF files.

While I haven't personally worked with firebase and Nuxt recently, these resources might still offer guidance on implementing it effectively in Nuxt.

Answer 4

There are multiple solutions available for this issue.

If you need to load 3rd party scripts, one option is to refer to this solution:

Another approach could be utilizing Nuxt plugins depending on the requirements: https://nuxtjs.org/docs/2.x/directory-structure/plugins/

Additionally, there's a solution available for properly integrating Stripe in Nuxt:

Remember that the static directory is not meant for storing your code. It should only contain public assets like favicons or shared PDF files.

While I haven't personally worked with firebase and Nuxt recently, these resources might still offer guidance on implementing it effectively in Nuxt.

Answer 5

Answer №3

One way to load the html is by using the render() method in your Vue component file.

Check nuxt.config.js for this configuration:

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

In your Vue component file, you can use the following code:

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

Once done, your page will be rendered as a component in either your Vue <router-view/> or <nuxt/>. Just ensure that there are no <script> tags within your my_html.html file. Instead, place any JavaScript code inside the render() method like shown 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>

Answer 6

One way to load the html is by using the render() method in your Vue component file.

Check nuxt.config.js for this configuration:

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

In your Vue component file, you can use the following code:

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

Once done, your page will be rendered as a component in either your Vue <router-view/> or <nuxt/>. Just ensure that there are no <script> tags within your my_html.html file. Instead, place any JavaScript code inside the render() method like shown 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>

Guide on utilizing raw HTML files within Nuxt (Vue.js) framework

Answer №1

Answer №2

Answer №3

Similar questions

Why must I handle Access-Control-Allow-Origin issues with XMLHttpRequest() but not with forms?

What is the best way to reset an animation back to its original state after clicking the button again?

What strategies can be employed to reduce the need for numerous if-else statements in my JavaScript code?

Styling Your Navigation Bar with CSS and Active States

Combining two variables in AngularJS seamlessly, without explicit instruction

What is the best way to detect component errors on the server with Angular Universal?

The tabs are visible in the drawer, but the transition is not occurring

JQuery Anchor Link Scrolling Problem on Specific Devices

Single-node interaction with three.js

Encountering Build Issue: "NgSemanticModule is not recognized as an NgModule" persists despite inclusion of dependencies and importing into primary module

Press the button obscured by an image

Rearrange two HTML tags that are separated by certain fixed tags

Ways to incorporate lighting into the instancing shader

Retrieving specific values from a JArray containing Lists of JInts

Ensure that you select the checkbox if it is visible; if it is not, then you should

Show the text of a link when it is selected using the tab key in a JavaScript event

How to access a webpage on your Android device without the address bar visible

Exploring date formatting in NestJs with Javascript

update the componentWillMount() function

Thinking about reconfiguring the component's API?